CSS Grid for Layout
Define rows and columns with CSS Grid, place items precisely, and create common page layouts with minimal code.
What Is CSS Grid?
CSS Grid is a two-dimensional layout system — you control both rows and columns. It's the best tool for overall page structure and explicit placement of elements across a defined grid.
Defining Columns: grid-template-columns
grid-template-columns defines the column structure. Use fixed sizes (px), flexible fractions (fr), or auto. repeat(n, size) repeats a track definition.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}