Materialize Grid for irregular boxes not workings - html

Question

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:
And I want it to be more like this:
I am using Django and Materialize. And here is the code I have written.

Answer 1

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.