1. Grid Container
A grid container is created by setting display: grid;. Its children automatically become grid items.
CSS Example
.grid-container {
display: grid;
background: lightgray;
padding: 10px;
}
.item {
background: skyblue;
margin: 5px;
padding: 10px;
}2. Grid Template Rows & Columns
Defines the structure of the grid using grid-template-rows and grid-template-columns.
CSS Example
.grid {
display: grid;
grid-template-columns: 100px 200px auto;
grid-template-rows: 80px 120px;
background: lightyellow;
}
.box { background: orange; margin: 5px; padding: 10px; }3. Grid-gap
Controls the spacing between rows and columns with grid-gap (or row-gap, column-gap).
CSS Example
.grid-gap {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
background: lightblue;
}
.item { background: purple; color: white; padding: 10px; }4. Grid Area & Line Numbers
Place items using line numbers or define grid-area names.
CSS Example
.grid-lines {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 80px;
background: lavender;
}
.header { grid-column: 1 / 5; background: red; color: white; }
.sidebar { grid-row: 2; grid-column: 1 / 2; background: blue; color: white; }
.content { grid-row: 2; grid-column: 2 / 5; background: green; color: white; }5. Fractional Units (fr)
The fr unit represents a fraction of available space in the grid container.
CSS Example
.grid-fr {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
background: lightgreen;
}
.box { background: darkgreen; color: white; margin: 5px; padding: 10px; }6. Auto-fit & Auto-fill
Automatically fill or fit items into available space using repeat(), auto-fit, and auto-fill.
CSS Example
.auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
background: pink;
}
.item { background: red; color: white; padding: 10px; }7. Nested Grids
A grid item can itself be a grid container, allowing nested grids.
CSS Example
.outer {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
background: lightcoral;
padding: 10px;
}
.inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
background: white;
}
.box { background: teal; color: white; padding: 10px; }