Skip to content
AlexFlipnote edited this page Apr 23, 2021 · 1 revision

Modesta offers a grid system based on CSS flex where the max amount of grids to one row is 12.

Example

<section class="flex-grid">
   <div class="col-xs-4">
      <h1>My website</h1>
   </div>
   <div class="col-xs-8">
      <p>A lot of text inserted here, yes yes</p>
   </div>
</section>

In total, this col combination (4 + 8) results to 12. Doing more or less will result in weird behaviour. If you want to have the grid system do this automatically, simply remove the numbers in col and only have col-xs. This will use CSS flex to attempt to automiatically split the grid to equal amount to every box.

Source: https://github.com/AlexFlipnote/Modesta/blob/master/scss/components/_grid.scss

Clone this wiki locally