Materialize grid do 5 columns

Question

I have div s12, how I can do in Materialize 5 columns?

My code:

<div class="col s12">
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l4"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
</div>

Please help do 5 same columns. 12/5 not entirely share.

Answer 1

Materialize 5 Column Responsive Layout

The below is compatible with Materialize 0.98.1 and above as it uses the newly introduced xl media breakpoint.

Add the following CSS to your global stylesheet, The above CSS is compatible with other Materialize .col classes too. For example, if you want 5 equal columns on medium and above, and half width columns on small and below, use the following:

.s5ths,
.m5ths,
.l5ths,
.xl5ths {
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s5ths {
  width: 20%;
}

@media only screen and (min-width: 601px) {
  .row .col.m5ths {
    width: 20%;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.l5ths {
    width: 20%;
  }
}

@media only screen and (min-width: 1201px) {
  .row .col.xl5ths {
    width: 20%;
  }
}

    <div class="row">
      <div class="col m5ths s6">Column 1</div>
      <div class="col m5ths s6">Column 2</div>
      <div class="col m5ths s6">Column 3</div>
      <div class="col m5ths s6">Column 4</div>
      <div class="col m5ths s6">Column 5</div>
    </div>

Here is a working example of the above. Resize the window to see it in action.

---

If you're using SASS in your project, I highly recommend using the SASS media queries that Materialize provides.

Answer 2

All you have to do is to make a common custom class and inherit properties from materialize of their s1, s2... elements as per your requirements as:

Code Snippet

.grid-example {
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  background-color: tomato;
  color: white;
  padding: 0;
}

.custom-col {
    width: 20%;
    margin-left: auto;
    left: auto;
    right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col custom-col grid-example">1</div>
  <div class="col custom-col grid-example">2</div>
  <div class="col custom-col grid-example">3</div>
  <div class="col custom-col grid-example">4</div>
  <div class="col custom-col grid-example">5</div>
</div>