6.4 templates.layout-3cols Layout 3 columns
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.
Page title
Main content
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