CSS Grid

CSS Grid is a CSS layout system that helps you arrange HTML elements into rows and columns.
Instead of placing items one after another, CSS Grid lets you organize them like boxes in a table. This makes it much easier to build clean and responsive web page layouts.
Example
imagine placing different objects on those tiles:

• A chair on Tile 1
• A table on Tile 2
• A lamp on Tile 3
• A bed on Tile 4

Each object has its own space.

CSS Grid works in exactly the same way.

Your webpage is divided into boxes called grid cells, and each HTML element is placed inside one of those boxes.
Creating Your First Grid

Let's create a simple grid with six boxes.

HTML

1
2
3
4
5
6

Here, the .container holds six child elements.

CSS
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
gap: 10px;
}

.container div{
background: lightblue;
padding: 20px;
text-align: center;
}
Some common examples include:

YouTube video layouts

For example, the YouTube homepage displays videos like this:

+---------+---------+---------+
| Video 1 | Video 2 | Video 3 |
+---------+---------+---------+
| Video 4 | Video 5 | Video 6 |
+---------+---------+---------+

Each video card sits inside its own grid cell.