Grid Item Responsive Breakpoints

Use the @breakpoint options to do advanced responsive layouts. More information about breakpoints can be found on the dedicated page.

  • Item 1
    1. Up to small breakpoint: start at row 2 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 4 columns
    3. Starting at medium breakpoint: start at row 1 and span for 3 columns
  • Item 2
    1. Up to small breakpoint: start at row 1 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 8 columns
    3. Starting at medium breakpoint: start at row 1 and span for 9 columns
 Demo
Item 1
Item 2
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '12 4@small 3@medium',
      row_start: '2 1@small',
      content: item_1,
    },
    {
      column_start: '1 5@small 4@medium',
      column_span: '12 8@small 9@medium',
      row_start: '1 1@small',
      content: item_2,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-start="2 1@small" column-start="1" column-span="12 4@small 3@medium">
    <!-- Item Content -->
  </bolt-grid-item>
  <bolt-grid-item row-start="1 1@small" column-start="1 5@small 4@medium" column-span="12 8@small 9@medium">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>