Search code examples
htmlcssmaterialize

Materialize Grid for irregular boxes not workings

I am trying to make the front end using materialize and I have used Django for the backend. The current look I am getting is something like this:

enter image description here

And I want it to be more like this:

enter image description here

I am using Django and Materialize. And here is the code I have written.

Solution

  • This layout is easy to achieve with CSS grid, but if you wanted to approximate it with the Materialize grid, you just need to fix your columns and use a bit of flex.

    The example you want to replicate has two main columns:

    <div class="row">
    <!-- Two columns, wider on the left -->
    <div class="col s12 l8">Left</div>
    <div class="col s12 l4">Right</div>
</div>

    The left hand column than has nested rows and columns, like this:

    <div class="row">
      <!-- Three columns -->
      <div class="col s4"></div>
      <div class="col s4"></div>
      <div class="col s4"></div>
</div>

<div class="row">
      <!-- One column -->
      <div class="col s12"></div>
</div>

<div class="row">
      <!-- Three columns -->
      <div class="col s4"></div>
      <div class="col s4"></div>
      <div class="col s4"></div>
</div>

    We need to use flex on two of the rows - this forces the content to stretch to fit. Be careful with flex, it breaks the grid system at small screen sizes.

    We also need a bit of css to force the button to fill the container, and to remove the margin bottom from the last row. I've created a wrapper called .content that we'll use to apply the padding (same as the margin from the rows for consistency).

    Codepen.