Just like FlexBox, CSS Grid with the use of rows and columns, makes it easier to style website elements.

CSS display property allows two grid properties: Grid and Inline Grid. The elements placed in the grid container are called grid items.

Most of the properties of Grid are similar to FlexBox.

Let’s look at how you can create a grid in CSS.

Output:

Grid Row & Column Property

This is just adjacent to the flex-grow property in FlexBox. It decides how many columns the selected element will take in the Grid.

Example:

<div class="grid-item" style="grid-row: 1/5;">2</div>

Output:

This way you can style Grid dimensions to create Header, Footer, and other structures of your website.