to start with in the GitHub repo. Now let's do this step by step. Take a look at the markup. We have a left section and a main section directly within the body. In the main section, we have a div with class container with all the blocks, four blocks with class block one. These are the ones sized equally in the first row, then four more blocks as we see in this layout here. Basic styles like height, margins, padding, colors are all already added. So firstly, we'll work on the left and main section, for which let's turn the body itself into a grid container. display: grid, grid-template-columns. The sidebar is the first column, which has a fixed width, say about 14rem. And the second column is the main section, which occupies the rest of the space. So 1fr is the value. Let's view this with live server. And this is what

to the container div here. Display grid, grid-template-columns. We need eight columns, repeat(8, 1fr), and also some gap about 1.5rem. This makes all the eight blocks occupy one column each. Now time to span each of the items using the grid-column property. The first four divs have block-one as the class name, starting from here. So scroll up to the block-one styles and use the grid-column property. Here, we don't need to specify the grid-column-start value because it's the default value that we need. So we only need to specify the grid-column-end, which can be specified using the span keyword. We want each of the items to span two columns, and this will do the trick. Perfect. The first four blocks are now in place. Next, block-two and block-four need to span across five columns. I'm sure you know what to do now. block-two, grid-column, span 5, copy the same thing.

are now in place. Next, block two and block four need to span across five columns. I'm sure you know what to do now. block two, grid column, span five, copy the same thing and add it to block four as well. And then the block three and block five, the ones on the right need to span across three columns. So grid column, span three, copy the same thing, paste it down here. And now there we go. It's perfect. Finally, for this content here, let's refer our mockup again. We have four items at each corner of the div. So once again, we need to turn this grid item into a grid container for its child elements. Previously, we had a grid container within a grid item, but now we are turning a grid item itself into a grid container again, and that just works fine to get to the code, scroll up to block one styles. This rule was for block one as a grid item. And now we are adding

into a grid container again, and that just works fine to get to the code, scroll up to block one styles. This rule was for block one as a grid item. And now we are adding some styles for block one to behave as a grid container. So let's turn this into a grid container, display grid. We need two columns, auto, auto. This is very similar to what we did with our profile card example. Now let's see. We need to space out the rows and columns. So just like we did in the profile card example, let's use the place-content property, space-between being the value. And let's see. We're almost there. Just need to fix the alignment of these two items. The ellipses here needs to align to the right of the grid cell. So select that particular ellipses. Here it is. F A ellipses. And to align the content within only this cell to the right that is horizontally, we use the justify-self property, the value