6.4 templates.layout-3cols Layout 3 columns

Toggle example guides Toggle HTML markup

Besides a two column layout, you can also get 3 columns. For this you can fill the region sidebar second with blocks. When you use sidebar second and sidebar first the columns will take up an equal share of the row.

Example

Page title

Main content

Sidebar first

Sidebar second

Markup: 05-templates/layout/layout-3columns.twig
<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div class="row container layout--with-three-columns">
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
        <p>Sidebar first</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-second" style="padding: 20px; background-color:#ffe0b2 ; min-height: 400px">
        <p>Sidebar second</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>

  </div>
</div>
Source: 05-templates/layout/layout.scss, line 44