CSS Grid is a layout system that arranges items in two ways — across in rows and down in columns.
You can use it to design a webpage by placing headers, sidebars, content, and footers in a clear 2D layout.
It helps you divide the page into parts both across (rows) and down (columns).
You can use Grid when you want to build full-page layouts or arrange sections neatly in both directions.
There are some key points of CSS Grid:
- It works well for layouts that go in two directions.
- It is suitable for full-page designs or large section layouts.
- It simplifies complex page designs and ensures a tidy layout that adapts smoothly to any screen size.
- It provides complete control over spacing, alignment, and structure.
Syntax:
.parent {
display: grid; /* Enables Grid Layout */
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: auto auto; /* Adjust rows automatically */
gap: 20px; /* Space between grid items */
}
Example:
CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
background: #f9f9f9;
padding: 20px;
}
.box {
background: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
HTML:
Box 1Box 2Box 3Box 4Box 5Box 6
Output:
- There’s a light grey container holding six blue boxes with white text (Box 1, Box 2, Box 3, etc.).
- The boxes are arranged in three equal columns with 15px space between them.
- Each box has 20px padding and centered text.
Visual Output:
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6