Grid Container
First, you designate an element as a grid container. This element will hold the grid items (your content). You can do this by setting the element's display property to grid
or inline-grid
.
.container {
display: grid;
}
/* Or for an inline grid */
.inline-container {
display: inline-grid;
}
Defining Rows and Columns
You define the rows and columns in the grid container using grid-template-rows
and grid-template-columns
.
.container {
display: grid;
grid-template-columns: 100px 200px auto;
grid-template-rows: 50px 100px;
}
Grid Gap
Grid gap is the space between each row and column. Use grid-gap
, grid-row-gap
, and grid-column-gap
.
.container {
display: grid;
grid-gap: 10px; /* Space between rows and columns */
}
Placing Items
You can place grid items in specific locations using grid-column-start
, grid-column-end
, grid-row-start
, and grid-row-end
.
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
Shorthand Properties
There are shorthand properties for quicker definitions.
.item {
grid-column: 1 / 3; /* Start at line 1 and end at line 3 */
grid-row: 2 / 4;
}
Fractional Units (fr)
The fr unit allows you to distribute available space in fractions.
.container {
grid-template-columns: 1fr 2fr 1fr; /* 2nd column is twice as wide as the others */
}
Repeat Function
To avoid repetition, use repeat()
.
.container {
grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
}
auto-fill and auto-fit
auto-fill
and auto-fit
are used with repeat() to automatically place as many items as possible.
.container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
Grid Areas
Define areas in your grid and assign items to these areas.
.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
Responsive Design
You can create responsive designs by combining CSS Grid with media queries.
.container {
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
Practice
The best way to learn CSS Grid is through practice. Try creating a basic layout with a header, sidebar, main content area, and footer. Experiment with different configurations and see how the elements rearrange themselves.
Top comments (0)