Grid

How it works

The grid structure is based on the Bootstrap principles of dividing 12 columns * . First create a div object with the row class. Inside it, create another div object with the col class. Then, tell us which dimensions you want to apply as follows.

* The number 12 is great to be used as a pattern for dividing the layout, as it can be divided by 2, 3, 4 and 6. This helps a lot!

<div class="row center-align">
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
</div>

Numbering

The numbering indicates the proportional width that your object will have.

<div class="row center-align">
  <div class="col s12">s12</div>
  <div class="col s6">s6</div>
  <div class="col s6">s6</div>
  <div class="col s4">s4</div>
  <div class="col s4">s4</div>
  <div class="col s4">s4</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
</div>

Different screen sizes

The s defines the measurement of your object when the screen is smaller than 400px or in all cases, when there is no other definition for the object. If you add m followed by a number from 1 to 12, after s , you will define your object's measurement when the screen is larger than 400px or less than 800px . l defines the same standard for screens above 800px . To see the example, resize the browser.

<div class="row center-align">
  <div class="s12 m6 l3">s12 m6 l3</div>
  <div class="s12 m6 l9">s12 m6 l9</div>
</div>

Resize your browser to see the objects behave as described.

Push class

The push class is used to push the content. The push-s3 class, for example, creates a left margin and pushes the col class object to the right.

<div class="row center-align">
  <div class="col s12 m9 push-m3 l6 push-l6">
    <p>col s12 m6 push-m6 l6 push-l3</p>
  </div>
</div>

Container class

The container class creates a central area initially 75% of the page width. If the screen size is less than 800px , the width becomes 90%. If the screen size is less than 400px , the width becomes 100%.

<div class="row center-align">
  <div class="col s12">
    <p>row area</p>
  </div>
</div>
<div class="row center-align">
  <div class="col s12">
    <div class="container">
      <p>container area</p>
    </div>
  </div>
</div>

Responsiveness

If you need to create or change any classes in your code, consider the following CSS standard.

p {
  font-size: 1.2vw;
}
@media (max-width: 800px) {
  p {
    font-size: 3vw;
  }
}
@media (max-width: 400px) {
  p {
    font-size: 6vw;
  }
}