How to set five column in row with Materialize Design?

Question

I am using materialize design framework for responsive html page. We can easily manage 2, 3, 4 column in a row. But right now i want to show 5 column in a row.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
      <div class="col l3">
      <img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
      </div>
    </div>
  </div>

I want to show five image in a row.

Answer 1

Try this HTML and CSS for it...

HTML:-

<div class="row-cover"><div class="row-wrap"><div class="row">
      <div class="col s2 offset-s1">1</div>
      <div class="col s2">2</div>
      <div class="col s2">3</div>
      <div class="col s2">4</div>
      <div class="col s2">5</div>
</div></div></div>

CSS:-

.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
@media only screen and (max-width: 767px) {
    .row-wrap { margin: 0; }
}

This idea will work for you, you can change the responsiveness for large, medium and small screens as far as your requirement is consent...