Mirage: BGA styles

3.2 layouts.layout-3col Responsive 3-column grid

Toggle example guides Toggle HTML markup

The .layout-3col layout is a responsive grid layout that is:

  • 1 column at mobile sizes
  • 2 columns at tablet sizes
  • 3 columns at desktop sizes

The .layout-3col class is used on the container div for the layout. A grid item in the container can be created using one of the following classes:

  • .layout-3col__full : 3-column wide grid item; starts a new row
  • .layout-3col__left-content : 2-column wide grid item, spanning columns 1 and 2; starts a new row
  • .layout-3col__right-content : 2-column wide grid item, spanning columns 2 and 3; starts a new row
  • .layout-3col__left-sidebar : 1-column wide grid item spanning column 1; starts a new row on tablet screens
  • .layout-3col__first-left-sidebar : 1-column wide grid item spanning column 1; spans column 1 and starts a new row on tablet screens only
  • .layout-3col__second-left-sidebar : 1-column wide grid item spanning column 1; spans column 2 on tablet screens only
  • .layout-3col__right-sidebar : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .layout-3col__col-1 : 1-column wide grid item spanning column 1; starts a new row
  • .layout-3col__col-2 : 1-column wide grid item spanning column 2
  • .layout-3col__col-3 : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .layout-3col__col-4 : At tablet sizes, the __col-x grid items will form an irregular layout of 2 items in the first row and 1 item in the second row. The __col-4 is a "hidden" item that does not appear on the large-screen 3-column grid, but is a 1-column wide grid item spanning column 2 on tablet screens.
  • .layout-3col__col-x : 1-column wide grid item spanning column 1; when several of these are used inside a .layout-3col__grid-item-container or .layout-3col, the first one is positioned like __col-1, the second like __col-2, etc.

There are 2 ways to do a nested grid:

  1. Place a grid container div inside a grid item. Just apply the normal classes to the nested grid container and its grid items.
  2. The grid item's div is also the grid container for the nested grid. In this case, the .layout3-col__grid-item-container class should be added to the div to ensure its nested grid items align with the parent grid.
Example
The .layout-3col__full grid item.
The .layout-3col__left-content grid item.
The .layout-3col__right-sidebar grid item.
The .layout-3col__right-content grid item.
The .layout-3col__left-sidebar grid item.
The .layout-3col__right-content grid item.
The .layout-3col__first-left-sidebar grid item.
The .layout-3col__second-left-sidebar grid item.
The .layout-3col__col-1 grid item.
The .layout-3col__col-2 grid item.
The .layout-3col__col-3 grid item. Don't forget to look for the .layout-3col__col-4 grid item at tablet sizes.
The .layout-3col__col-4 grid item.
The first .layout-3col__col-x grid item in this nested grid.
The second .layout-3col__col-x grid item in this nested grid.
The third .layout-3col__col-x grid item in this nested grid.
The fourth .layout-3col__col-x grid item in this nested grid.
The fifth .layout-3col__col-x grid item in this nested grid.
The sixth .layout-3col__col-x grid item in this nested grid.
Markup: layouts/layout-3col/layout-3col.twig 
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__full"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__full<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__left-content"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__left-content<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__right-sidebar"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__right-sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__right-content"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__right-content<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__left-sidebar"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__left-sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__right-content"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__right-content<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__first-left-sidebar"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__first-left-sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__second-left-sidebar"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__second-left-sidebar<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-1"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-1<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-2"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-2<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-3"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-3<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item. Don't forget to look for the <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-4<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item at tablet sizes.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-4"</span>&gt;</span>
    The <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-4<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__full layout-3col__grid-item-container"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The first <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The second <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The third <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The fourth <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The fifth <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-3col__col-x"</span>&gt;</span>
      The sixth <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>.layout-3col__col-x<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> grid item in this nested grid.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span>
Source: layouts/layout-3col/_layout-3col.scss, line 1