Mastering Grid Layouts: A Detailed Overview

Grid container

A grid layout starts by setting a container element as grid using display property.

display: grid;

Grid Items

The child items inside the container is called grid items.

Defining rows and columns

In a grid we can define as many as rows and columns we want using

grid-template-columns:(for columns)

grid-template-rows(for rows)

I want to describe it in the simple way like as we can say it like rows defines the height

Think of rows as horizontal "slices" of the grid.

and grid-template-columns describes the width of the items inside the container.

Think of columns as vertical "slices" of the grid.

    display: grid;
   grid-template-rows: 100px 200px 100px 200px;

Here we can observe that the container items are displayed in the form of item1 of height 100px item2 of 200px Item3 of 100px and item4 of 200px.

 display: grid;
   grid-template-columns: 100px 200px 100px 200px;
}

Here the items of width are displayed as

100px of width for item1

200px of width for item2

100px of width for item1

200px of width for item2

• Rows = Height (controlled by grid-template-rows).

• Columns = Width (controlled by grid-template-columns).

grid-template-areas:

This allows to name sections of your grid and assign each item to specific area.

Placing grid items

Here we can control the placement of the item