ba-grid

Properties and attributes

Permitted ARIA roles

• list
• listitem

Slots

Parent components

ba-grid can be slotted into:

• <ba‑accordion>
• <ba‑card>
• <ba‑card‑segmented>
• <ba‑checkbox‑card>
• <ba‑checkbox‑list‑card>
• <ba‑details>
• <ba‑form>
• <ba‑form‑group>
• <ba‑grid>
• <ba‑header‑section>
• <ba‑hero>
• <ba‑input‑password>
• <ba‑media‑object>
• <ba‑message>
• <ba‑message‑global>
• <ba‑page‑segment>
• <ba‑radio‑card>
• <ba‑tab‑container‑content>
• <ba‑tab‑chip‑content>

Usage

Classes

The following classes can be used to position child elements within a cell:

• ba-c-grid--top-left
• ba-c-grid--top-center
• ba-c-grid--top-right
• ba-c-grid--middle-left
• ba-c-grid--center
• ba-c-grid--middle-right
• ba-c-grid--bottom-left
• ba-c-grid--bottom-center
• ba-c-grid--bottom-right

Overview

All properties on this component contain a number followed by vw which defines the viewport width (in pixels) that the value will be applied. The value provided will then persist at each wider viewport until another property has been set.

For example setting columns-480vw and columns-640vw attributes will:

• apply the default value for columns between viewport widths up to 479px
• apply the value set in columns-480vw between viewport widths of 480px and 639px
• apply the value set in columns-640vw at all viewport widths larger than 640px

Equal width columns

Applying a single number to the columns-<viewport>vw attributes will split the contents of ba-grid into that many columns with each column having the same width.

<ba-grid columns-640vw="2"> ... </ba-grid>

<ba-grid columns-640vw="2" columns-800vw="3" columns-1024vw="4"> ... </ba-grid>

<ba-grid columns-800vw="4" columns-1024vw="3"> ... </ba-grid>

Spanning columns

A ratio can be passed to the columns-<viewport>vw attributes to create layouts that span multiple columns.

The ratio is in the format A:B where:

• The total number of columns is the sum of numberA and numberB in the ratio
• Odd child elements will span numberA columns of the total number of columns
• Even child elements will span numberB columns of the total number of columns

<ba-grid columns-800vw="1:2">
  <div><!-- Spans 1 of 3 columns --> </div>
  <div><!-- Spans 2 of 3 columns --> </div>
  <div><!-- Spans 1 of 3 columns --> </div>
  <div><!-- Spans 2 of 3 columns --> </div>
  ...
</ba-grid>

<ba-grid columns-480vw="2" columns-640vw="2:1" columns-1024vw="3:2">
  <div><!-- 1 column, then 1 of 2 columns, then spans 2 of 3 columns, then spans 3 of 5 columns --> </div>
  <div><!-- 1 column, then 2 of 2 columns, then spans 1 of 3 columns, then spans 2 of 5 columns --> </div>
  <div><!-- 1 column, then 1 of 2 columns, then spans 2 of 3 columns, then spans 3 of 5 columns --> </div>
  <div><!-- 1 column, then 2 of 2 columns, then spans 1 of 3 columns, then spans 2 of 5 columns --> </div>
  ...
</ba-grid>

Setting row spacing

The spacing (gutters) between the rows can be edited by passing a value to the row-gutter-x properties. Row gutters by default will match the gutters between columns at each viewport. If a row gutter has been set then that value will persist across all larger viewports ignoring the default row gutter values.

<ba-grid row-gutter-480vw="16"> ... </ba-grid>

<ba-grid row-gutter-640vw="32"> ... </ba-grid>

<ba-grid row-gutter-480vw="32" row-gutter-800vw="24"> ... </ba-grid>

Setting column spacing

The spacing (gutters) between the columns can be edited by passing a value to the column-gutter-x properties. Column gutters by default will match the gutter between rows at each viewport. If a column gutter has been set then that value will persist across all larger viewports ignoring the default row gap values.

<ba-grid column-gutter-480vw="16"> ... </ba-grid>

<ba-grid column-gutter-640vw="32"> ... </ba-grid>

<ba-grid column-gutter-480vw="32" column-gutter-800vw="24"> ... </ba-grid>

Nesting ba-grid inside another ba-grid

ba-grid can be nested within itself to create more complex layouts

<ba-grid columns-1024vw="2:1">
  <div>
    <!-- main content -->
  </div>
  <ba-grid columns-640vw="3" columns-1024vw="1" row-gutter-1024vw="16" role="list">
    <!-- additional content -->
    <div role="listitem">...</div>
    <div role="listitem">...</div>
    <div role="listitem">...</div>
  </ba-grid>
</ba-grid>

Positioning elements within ba-grid

Elements can be positioned in the space that they have available. Available space in a cell is calculated by the highest element in a row and the widest element in a column (note this can also be the element that you want to position)

<ba-grid columns-1024vw="2:1">
  <ba-content>
    <!-- some content placed here -->
  </ba-content>
  <ba-image class="ba-c-grid--middle-left" src="/url" alt="alt text"></ba-image>
</ba-grid>

React documentation coming soon.

React Native documentation coming soon.