grid

Layout elements within a container

Parameter	Type	Description
$layouts	map	A Sass map representing the layout of elements for defined grid breakpoints
$nested-container	string or undefined	The name of the container to nest the layout elements in

The examples below assume that the grid is 12 columns and following breakpoints are defined:

assets/styles/config/layout/_breakpoints.scss

$initial-breakpoint-name: 'xs';

$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);

Example: Create a grid container and layout elements within it

Components/ExampleComponent/index.twig

<div class="m-example-component">
  <div class="m-example-component__child-one">
    Child one
  </div>
  <div class="m-example-component__child-two">
    Child two
  </div>
  <div class="m-example-component__child-three">
    Child three
  </div>
  <div class="m-example-component__child-fourth">
    Child fourth
  </div>
  <div class="m-example-component__child-fifth">
    Child fifth
  </div>
</div>

Components/ExampleComponent/_style.scss

 // `xs` - initial breakpoint
 // `md` - at this breakpoint the layout of elements will change
 // `12`, `6`, `5` - the number of columns each element should take up
 // `child-one`, `child-two`, `child-three`, `child-fourth`, `child-fifth` - the block element names (BEM)
 // `.` (dot) - an empty column
.m-example-component {
  @include grid((
    xs: (
      '12(child-one)',
      '12(child-two)',
      '12(child-three)',
      '12(child-fourth)',
      '12(child-fifth)',
    ),
    md: (
      '6(child-one) . 5(child-two)',
      '6(child-three) . 5(child-fourth)',
      '12(child-five)',
    )
  ))
}

Example: Create a nested grid container and layout elements within it

Components/ExampleComponent/index.twig

<div class="m-example-component">
  <div class="m-example-component__child-one">
    Child one
  </div>
  <div class="m-example-component__child-two">
    Child two
  </div>
  <div class="m-example-component__child-three">
    Child three
  </div>
  <div class="m-example-component__child-fourth">
    Child fourth
  </div>
  <div class="m-example-component__child-fifth">
    <div class="child-fifth__nested-child-one">
      Nested child one
    </div>
    <div class="child-fifth__nested-child-two">
      Nested child two
    </div>
  </div>
</div>

Components/ExampleComponent/_style.scss

.m-example-component {
  @include grid((
    xs: (
      '12(child-one)',
      '12(child-two)',
      '12(child-three)',
      '12(child-fourth)',
      '12(child-fifth)',
    ),
    md: (
      '6(child-one) . 5(child-two)',
      '6(child-three) . 5(child-fourth)',
      '12(child-fifth)',
    )
  ));

  &__child-fifth {
    @include grid((
      xs: (
        '12(nested-child-one)',
        '12(nested-child-two)',
      ),
      md: (
        '6(nested-child-one) . 5(nested-child-two)',
      )
    ), '.child-fifth');
  }
}