MSlide² layouts are built inside a full-height-section.
The layout pattern uses a section, then a column structure, then internal block regions.
<!-- MSlide² slide container -->
<section class="full-height-section">
<!-- Main layout row -->
<div class="columns">
<!-- Layout column -->
<div class="column">
<!-- Internal layout block -->
<div class="block top-left">
Content goes here
</div>
</div>
</div>
</section> With the following layout progretion:
1 column
└─ top / bottom regions
2 columns
└─ left / right regions
2 columns
└─ four-region structure
3 columns
└─ repeated top and bottom regions
4 columns
└─ repeated top and bottom regions
A two-row layout uses one column with two stacked block regions.
<!-- Two-row MSlide² layout -->
<section class="full-height-section">
<div class="columns">
<div class="column">
<!-- Top content region -->
<div class="block top-left">
Top content
</div>
<!-- Bottom content region -->
<div class="block bottom">
Bottom content
</div>
</div>
</div>
</section> This pattern appears in the demo as 2 row layout A.
A two-column layout uses two sibling columns.
<!-- Two-column MSlide² layout -->
<section class="full-height-section">
<div class="columns">
<!-- Left column -->
<div class="column">
<div class="block left">
Left content
</div>
</div>
<!-- Right column -->
<div class="column">
<div class="block right">
Right content
</div>
</div>
</div>
</section> This pattern appears in the demo as 2 col layout A.
A more detailed layout divides each column into top and bottom blocks.
<!-- Two-column layout with four internal regions -->
<section class="full-height-section">
<div class="columns">
<!-- Left column -->
<div class="column">
<!-- Top-left region -->
<div class="block top-left">
Top-left content
</div>
<!-- Bottom-left region -->
<div class="block bottom-left">
Bottom-left content
</div>
</div>
<!-- Right column -->
<div class="column">
<!-- Top-right region -->
<div class="block top-right">
Top-right content
</div>
<!-- Bottom-right region -->
<div class="block bottom-right">
Bottom-right content
</div>
</div>
</div>
</section> This is the clearest MSlide² grid pattern: columns define horizontal division, blocks define vertical regions inside each column.
The same internal block structure can continue across three columns.
<!-- Three-column MSlide² layout -->
<section class="full-height-section">
<div class="columns">
<!-- Column 1 -->
<div class="column">
<div class="block top-left">Top content</div>
<div class="block bottom-left">Bottom content</div>
</div>
<!-- Column 2 -->
<div class="column">
<div class="block top-right">Top content</div>
<div class="block bottom-right">Bottom content</div>
</div>
<!-- Column 3 -->
<div class="column">
<div class="block top-right">Top content</div>
<div class="block bottom-right">Bottom content</div>
</div>
</div>
</section> This pattern appears in the demo as 3 column layout A.
Four-column layouts extend the same grid logic.
<!-- Four-column MSlide² layout -->
<section class="full-height-section">
<div class="columns">
<!-- Column 1 -->
<div class="column">
<div class="block top-left">Top content</div>
<div class="block bottom-left">Bottom content</div>
</div>
<!-- Column 2 -->
<div class="column">
<div class="block top-right">Top content</div>
<div class="block bottom-right">Bottom content</div>
</div>
<!-- Column 3 -->
<div class="column">
<div class="block top-right">Top content</div>
<div class="block bottom-right">Bottom content</div>
</div>
<!-- Column 4 -->
<div class="column">
<div class="block top-right">Top content</div>
<div class="block bottom-right">Bottom content</div>
</div>
</div>
</section> The same top and bottom region pattern is repeated across each column.
