CSS Grid Layout Level 2, often referred to simply as “CSS Grid,” is a powerful layout system designed to enhance the flexibility and control web developers have over their designs. It provides a robust framework for easily creating complex, responsive web layouts. One of the standout features introduced in Level 2 is the subgrid
property, which allows nested grids to inherit the row or column definitions from their parent grid. This capability simplifies the creation of consistent and maintainable nested layouts, making it an essential tool for modern web design.
subgrid
worksLet’s explore the work mechanics of subgrid
:
Inheritance: In a typical CSS Grid layout, when you create a nested grid (a grid within a grid), the child grid operates independently of the parent grid. With the subgrid
property, the child grid can inherit the row or column sizes from its parent grid, maintaining alignment and proportionality across different sections of the layout.
Simplified markup: Using subgrid
helps in maintaining a clean and maintainable codebase. Instead of redefining grid properties for nested elements, you can leverage the parent grid’s definitions, reducing redundancy and potential errors in the layout structure.
Usage: To implement a subgrid, apply the grid-template-rows: subgrid;
or grid-template-columns: subgrid;
property to the child grid. This allows the child grid to use the same row or column structure as its parent, ensuring consistent alignment.
We’ll start with a simple example to understand how the subgrid
property works.
In this example, the child-grid
inherits the column structure from the parent-grid
, ensuring that the items in the child grid align perfectly with the columns defined in the parent grid.
Now, let’s delve into a team dashboard example that demonstrates the application of the subgrid
property.
subgrid
Suppose we’re building a team dashboard where different sections represent essential aspects of team management. Each section, or widget, has its own distinct purpose, and the overall layout is designed using CSS Grid with the help of the subgrid
property for detailed analytics within one of the widgets.
We want to achieve the following structure with the help of CSS subgrid
property particularly in the “Analytics Dashboard” section:
If we do not use the subgrid
property, the layout structure within the “Analytics Dashboard” widget will no longer inherit the grid structure from its parent grid. Instead, it will be treated as an independent grid, and the charts will not align seamlessly within the widget as:
Let’s see how we can achieve this functionality with the help of CSS subgrid
property:
HTML
Lines 3–7: The head section contains metadata and links.
Lines 9–10: The body of the document starts, containing the main content of the web page. The div
element with the class dashboard
is the main container for the team dashboard.
Lines 12–14: A div
element with the classes widget
and widget-overview
.
Lines 18–21: A div
element with the classes widget
and widget-progress
.
Lines 24–27: A div
element with the classes widget
and widget-insights
.
Lines 30–38: A div
element with the classes widget
and widget-analytics
.
Lines 29–31: Another div
element with the class analytics-charts
to represent the subgrid for analytics charts.
CSS
Lines 1–4: The CSS file starts by styling the body, setting a 40-pixel margin, and specifying a font family. The margin creates space around the content, and the font family ensures a consistent text appearance.
Lines 6–11: The .dashboard
class becomes a grid container with a 20-pixel gap between items. It has two columns of equal width and two rows with heights determined by their content.
Lines 13–19: Widgets, represented by the .widget
class, share common styling attributes like a white background, dark gray text, an 8-pixel border-radius, 20 pixels of padding, and a subtle box shadow.
Lines 21–24: Heading elements within widgets (<h2>
) have a dark gray color matching the text and a 10-pixel bottom margin for separation.
Lines 26–37: Specific widgets are styled uniquely. For example, .widget-overview
spans two columns, .widget-progress
spans one column and .widget-insights
spans one column and two rows.
Lines 39–52: The .widget-analytics
class, representing a larger widget, spans two columns and two rows. It serves as a grid container with subgrid properties, inheriting definitions from the parent grid. The nested .analytics-charts
class is another grid container with specific column and row definitions.
Lines 54–60: Individual charts, represented by the .chart
class, share styling attributes like green background color, white text, an 8-pixel border-radius, 15 pixels of padding, and center-aligned text.
The subgrid
property in CSS provides a convenient solution for creating complex layouts with nested grids. In this scenario, the “Team Dashboard” example demonstrates how subgrid
enhances the structure and organization of widgets, allowing for a visually appealing and efficient layout. By understanding and leveraging properties like subgrid
, web developers can create responsive and sophisticated user interfaces.
Free Resources