Set up a div with this CSS style:

.grid {
 display: grid;
 grid-template-columns: 175px 300px 100px;
 grid-template-rows: 300px 200px 100px;
 margin: 15px auto 40px auto;
 width: 575px;
 border: 5px solid black;
}

This creates a CSS grid with 3 columns and 3 rows.
grid-template-columns allows you to divide the columns into specific lenghts and number of columns, grid-template-rows does the same for rows. In this grid-template-columns we have one column of 175px width, one column of 300px width, and finally one column of 100px width.
A total of 3 columns.

Create a div for each section you wish to create on this grid.
For example, this Mondrian has 6 sections. 3 Colour sections and 3 white sections.

<div class="grid">
 <!-- Colour Sections -->
 <div class="item-a"></div>
 <div class="item-a"></div>
 <div class="item-a"></div>

 <!-- White Sections -->
 <div class="item-e"></div>
 <div class="item-f"></div>
 <div class="item-g"></div>
<div>

Style each of the sections.
For example here is the yellow section of the Mondrian.

.item-a {
 grid-column: 1;
 grid-row: 1;
 background-color: yellow;
 border: 5px solid black;
}

This section is defined as all the area from column 1 and row 1.
Early we defined in the .grid style that the first column is 174px wide and the first row is 300px long.
The background-color is yellow.
And the border is a solid 5 pixel thick black line.

For trickier sections; such as the red section that spans multiple rows and columns. Set up the style like so:

.item-b {
 grid-column: 2/4;
 grid-row: 1/3;
 background-color: red;
 border: 5px solid black;
}

This creates a section that covers BETWEEN the start columns 2 and start 4
And BETWEEN the start of row 1 and the start of row 3

Put it all togther by styling the rest of the sections a,b,c,d,e,f

Feel free to use this a base to experiment and try different things with CSS grids!

View this project on GitHub