What is CSS subgrid?

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.

How subgrid works

Let’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.

Team dashboard with CSS 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:

Code explanation

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.

Conclusion

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.