Is this the solution you were searching for?
.grid-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
grid-template-rows: 100px 100px;
grid-gap: 13px;
padding: 2px;
}
.grid-container>div {
background-color: aqua;
text-align: center;
font-size: 15px;
}
.the-feed {
grid-area: 1 / 1 / 3 / 1;
}
<div class="grid-container">
<div class="the-feed">The Feed</div>
<div class="">Contact Lifecycle</div>
<div class="">Custom Fields</div>
<div class="">Custom Sales Activities</div>
<div class="">Multi-Currency</div>
</div>
Your layout consists of 3 columns that fill the entire screen width. You can set up the columns as follows:
grid-template-columns: repeat(3, 30vw);
Additionally, there are two rows of equal height. You can define the rows like this:
grid-template-rows: 100px 100px;
If you wish to have the second row taller than the first, you can adjust the code like so: grid-template-rows: 100px 150px;
To span a div across two rows, use this line of code:
.the-feed {
grid-area: 1 / 1 / 3 / 1;
}
The syntax may seem complex at first. Essentially, it instructs the div to start at gridline-row 1 and gridline-column 1 (e.g. 1/1), and end at gridline-row 3 and gridline-column 1 (e.g. 3/1).
Remember, gridlines are the lines between columns and rows, not the actual columns or rows. In a tic-tac-toe CSS grid, there are 3 rows and 3 columns but 4 row-grid-lines and 4 column-grid-lines. Refer to Why are CSS Grid-Area ending coordinates offset?