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; /* It makes three columns and divides the space equally between them */
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:
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> <div class="box">Box 6</div> </div>
Output:
There’s a light grey box that holds six blue boxes with white text (Box 1, Box 2, Box 3, etc.).
These boxes sit in three equal columns with 15px space between them, and each box has 20px padding with the text centered.