In this tutorial, we'll dive into the world of CSS Subgrid, a powerful tool that helps you create more flexible and responsive layouts. If you're familiar with Flexbox and Grid, you'll find Subgrid a valuable addition to your CSS arsenal.
CSS Subgrid simplifies the process of creating nested grid layouts, making it easier to maintain consistency and alignment across multiple grids. It's a game changer for complex projects where you need to maintain a consistent grid structure across various levels.
subgrid propertyThe key to using CSS Subgrid is the subgrid property, which you can apply to grid items. Once a grid item has the subgrid property, it becomes a sub-grid and can contain its own rows and columns.
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
display: subgrid;
}In the example above, .container is a parent grid containing three rows and columns. Each .item within .container is a sub-grid with two rows and columns, spanning across the entire parent grid.
align-self and justify-self propertiesWith Subgrid, you can easily align items within a sub-grid using the align-self and justify-self properties. These properties work just like their parent-grid counterparts.
.container .item {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
display: subgrid;
}
.item .sub-item {
grid-column: 1 / span 2;
align-self: center;
}In the example above, .item is a sub-grid, and .sub-item is an item within that sub-grid. By setting align-self: center, we've vertically aligned the .sub-item within its sub-grid.
align-items and justify-items propertiesThe align-items and justify-items properties are particularly useful when aligning items within a nested grid. These properties align items across all rows or columns of the sub-grid.
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.container .item {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-items: center;
}
.item .sub-item {
grid-column: 1 / span 2;
}In the example above, .item is a sub-grid with two rows and columns. By setting align-items: center and justify-items: center, we've centered all items within the sub-grid.
What does the `subgrid` property do when applied to a grid item?
Now that you've learned the basics of CSS Subgrid, let's put it into practice by building a responsive card layout.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.card {
display: subgrid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0.5rem;
padding: 1rem;
}
.card .content {
grid-column: 1 / span 2;
grid-row: 2 / span 2;
}
.card .header {
grid-column: span 2;
align-self: center;
}In the example above, we've created a responsive card layout using CSS Subgrid. The .container grid contains multiple cards, each represented by a .card. Each .card is a sub-grid with a header, content, and footer. The .header and .content are aligned within the sub-grid using the align-self and justify-self properties.
That's it for our CSS Subgrid tutorial! With this knowledge, you're well-equipped to create more flexible and responsive layouts in your projects. Happy coding! 🎉