CSS Grid Lesson - 42

1. Grid Container Properties:
display: grid;: Converts an element into a grid container.
grid-template-rows and grid-template-columns: Specifies the size of the rows and columns in the grid.
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
grid-gap: A shorthand for grid-row-gap and grid-column-gap, specifying the gap between grid items.
.container {
grid-gap: 10px;
}
2. Grid Item Properties:
grid-row and grid-column: Determines the size and location of an item within the grid.
.item {
grid-row: 1 / 3; /* Starts at row 1 and ends at row 3 */
grid-column: 2 / 4; /* Starts at column 2 and ends at column 4 */
}
grid-area: Assigns a grid item to a named grid area or specifies its size within the grid.
.item {
grid-area: header; /* Places the item in the 'header' area */
}
3. Grid Template Areas:
You can name areas of the grid and place items in those named areas for a more readable syntax.
.container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
4. Alignment Properties:
justify-items and align-items: Aligns grid items on the grid horizontally and vertically.
.container {
justify-items: center; /* Centers items horizontally */
align-items: end; /* Aligns items to the bottom */
}
justify-self and align-self: Aligns a specific grid item inside its grid area.
.item {
justify-self: start; /* Aligns the item to the start horizontally */
align-self: center; /* Centers the item vertically */
}
5. Responsive Grids:
Media queries can be used to create responsive grids that adapt based on the screen size.
@media screen and (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
CSS Grid provides a robust and efficient way to create layouts on the web, allowing for precise control over the placement and alignment of elements. It's supported in all modern browsers, making it a powerful tool for front-end web development.