The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Global HTML Code :

<div class="container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS Code:

.container {
  display: grid;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Output :

Must Know

Display Property

An HTML element becomes a grid container when its display set to grid display:grid.

All the child items inside the container will become the grid items.

.container {
	display:grid;
}

Grid Columns

Vertical lines of grid items are called columns.

Grid Rows

Horizontal lines of grid items are called rows.

Grid Gaps

The spaces b/w row & column are called gaps.

Now let's get our hands dirty,

1. Grid-template-columns :

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.