We are back to example number two. If you inspect here, click on grid, and look at the first item, you'll notice that I have used top, right, and bottom margins to add some spaces between the items vertically and horizontally. This is obviously a hacky way to add spaces, and thankfully, we have a quick, neat solution in grid to add spaces between rows and columns. Let me go back to the code and remove the margins first, remove, and also remove this paddingTop on the icon I had added for vertical alignment. To add spaces between columns, we can use the property columnGap again on the parent container, columnGap.

and paddings to individual items. And at the same time, with these gap properties, we only end up with spaces between the rows and columns and not around them. Back to the code. These two rules can be combined into a single one by using the shorthand gap property, where the first value is the row gap, 2rem, and the second value is the column gap. These two values are separated by spaces. And when both these values are the same, you can even combine them into one single value, just 2rem in our case. Let's check.

All the columns have auto sizing. And since the combined column widths are smaller than the parent container, the remaining space has been distributed to the auto columns by default. Inspect element to understand better. On grid, you can see that each column has some additional space to the right. Let's look at the code for this. Here's the markup, a description div, quantity, and the price. Here are the styles, but the one with respect to grid are here. grid-template-columns has auto repeated four times because we need four columns, all auto sized based on content.

This was about controlling spaces between columns. How about rows? So let's try and add a height here. Let's say height: 24rem and let's see what happens. We did not specify any height to our rows, but by default, the rows take up auto height. And that's why, like our columns got stretched to occupy full width, our rows also get stretched to occupy full height. We saw a similar behavior when we were implementing the header, footer and main section, right? To make the rows occupy only as much height as the content within and to control the spacing between them, we use the property align-content.