How to Use CSS Subgrid for Nested Layouts

Creating a visually appealing and user-friendly website involves mastering various CSS layout techniques. One such technique is CSS Subgrid, which allows you to create complex, nested layouts with ease. CSS Subgrid is a relatively new feature, but it offers powerful capabilities for web designers and developers. In this guide, we’ll dive deep into how to use CSS Subgrid for nested layouts, ensuring your website looks great and functions seamlessly.

Understanding CSS Subgrid

What is CSS Subgrid?

CSS Subgrid is an extension of the CSS Grid layout. It allows child elements of a grid item to inherit the grid structure of their parent. This means you can have a nested grid within a grid item that aligns with the overall grid of the parent container.

It provides a more intuitive way to manage complex layouts without duplicating grid definitions.

Why Use CSS Subgrid?

Using CSS Subgrid simplifies the process of creating nested layouts. Without Subgrid, you would need to define separate grids for parent and child elements, which can lead to inconsistent alignment and increased complexity.

Subgrid enables better alignment and consistency across your layout, making your design process more efficient and your code easier to maintain.

Setting Up a Basic Grid

Before diving into Subgrid, let’s start with a basic grid layout. This foundation will help us understand how Subgrid works within a grid context.

Creating a Simple Grid

First, we define a container and apply the display: grid property. Then, we set up columns and rows using grid-template-columns and grid-template-rows.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid #ccc;
}

In your HTML, you can structure it like this:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

This simple setup creates a grid with three columns and two rows, where each item spans a single cell.

Introducing Subgrid

Now, let’s introduce a nested grid using Subgrid. We’ll modify one of the items to contain a subgrid that aligns with the parent grid.

Defining a Subgrid

To create a subgrid, we need to make an item a grid container and then apply display: subgrid to its children.

.nested-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.nested-item {
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid #aaa;
}

In your HTML, nest another grid inside one of the items:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item nested-container">
    <div class="nested-item">Nested Item 1</div>
    <div class="nested-item">Nested Item 2</div>
    <div class="nested-item">Nested Item 3</div>
  </div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

With this setup, the nested items will align according to the grid defined by their parent container, making layout management more straightforward.

Practical Examples of CSS Subgrid

Now that we have a basic understanding of how to set up a Subgrid, let’s dive into some practical examples. These will help illustrate the versatility and power of CSS Subgrid in creating complex, nested layouts.

Creating a Dashboard Layout

Dashboards often require a complex layout with nested elements. Using Subgrid can help maintain alignment and consistency across various sections.

HTML Structure

<div class="dashboard">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main-content">
    <div class="nested-container">
      <div class="nested-item">Item 1</div>
      <div class="nested-item">Item 2</div>
      <div class="nested-item">Item 3</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS Styling

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px 1fr 100px;
  gap: 10px;
  height: 100vh;
}

.header {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.sidebar {
  grid-row: 2 / 3;
  background-color: #e9ecef;
}

.main-content {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

In this example, the .main-content div contains a nested grid that aligns with the overall layout of the dashboard, ensuring a clean and consistent design.

Blog Layout with Featured Posts

A blog layout with featured posts can benefit from Subgrid by maintaining alignment across different sections.

HTML Structure

<div class="blog">
  <div class="featured-posts">
    <div class="nested-container">
      <div class="nested-item">Featured Post 1</div>
      <div class="nested-item">Featured Post 2</div>
    </div>
  </div>
  <div class="recent-posts">Recent Posts</div>
  <div class="sidebar">Sidebar</div>
</div>

CSS Styling

.blog {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

.featured-posts {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.recent-posts {
  grid-column: 1 / 2;
  background-color: #e9ecef;
}

.sidebar {
  grid-column: 2 / 3;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

This setup ensures that the featured posts section aligns perfectly with the recent posts and sidebar, creating a harmonious layout.

Advanced Techniques with CSS Subgrid

To truly master CSS Subgrid, you need to explore some advanced techniques. These techniques will help you leverage the full potential of Subgrid for more complex and dynamic layouts.

Aligning Content Across Multiple Subgrids

You can align content across multiple subgrids within a parent grid. This is particularly useful when you have multiple sections that need to share the same grid structure.

HTML Structure

<div class="multi-grid">
  <div class="section-a">
    <div class="nested-container">
      <div class="nested-item">A1</div>
      <div class="nested-item">A2</div>
    </div>
  </div>
  <div class="section-b">
    <div class="nested-container">
      <div class="nested-item">B1</div>
      <div class="nested-item">B2</div>
    </div>
  </div>
</div>

CSS Styling

.multi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.section-a, .section-b {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

By using Sub grid, both sections align with each other, maintaining a cohesive design across different sections of your layout.

Creating Responsive Nested Layouts with Subgrid

One of the key benefits of using CSS Subgrid is its ability to create responsive nested layouts. By leveraging media queries and the flexibility of Subgrid, you can ensure your layout adapts smoothly to different screen sizes.

HTML Structure

<div class="responsive-grid">
  <div class="header">Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item">Content 1</div>
      <div class="nested-item">Content 2</div>
      <div class="nested-item">Content 3</div>
    </div>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

CSS Styling

.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  background-color: #f8f9fa;
}

.main {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.sidebar {
  background-color: #e9ecef;
}

.footer {
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

@media (min-width: 600px) {
  .responsive-grid {
    grid-template-columns: 1fr 200px;
  }

  .sidebar {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
}

@media (min-width: 900px) {
  .responsive-grid {
    grid-template-columns: 200px 1fr 200px;
  }

  .sidebar {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  .main {
    grid-column: 2 / 3;
  }
}

In this example, the layout changes based on the screen width. The sidebar moves to different positions, ensuring an optimal layout for various devices. The nested grid within the .main div remains consistent and responsive, thanks to Subgrid.

Aligning Subgrid Items with Parent Grid

Sometimes, you might need to align items within a subgrid with specific areas of the parent grid. This can be useful for creating more complex designs where elements need precise placement.

HTML Structure

<div class="complex-grid">
  <div class="header">Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item" style="grid-column: 1 / 3;">Content 1</div>
      <div class="nested-item">Content 2</div>
      <div class="nested-item">Content 3</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS Styling

.complex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  grid-column: 1 / 4;
  background-color: #f8f9fa;
}

.main {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / 4;
}

.footer {
  grid-column: 1 / 4;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

In this example, Content 1 spans two columns within the nested grid but aligns perfectly with the parent grid’s columns. This precise alignment is made simple with Subgrid, ensuring a cohesive design.

Troubleshooting Common Issues with Subgrid

While CSS Subgrid is powerful, it can sometimes be tricky to get it right. Here are a few common issues you might encounter and how to solve them.

Issue 1: Inconsistent Alignment

Sometimes, nested grid items might not align as expected. This usually happens if the parent grid’s columns or rows are not defined properly.

Solution

Ensure that the parent grid has a well-defined structure and that the nested grid uses subgrid correctly. Double-check your column and row definitions.

Issue 2: Subgrid Not Inheriting Parent Grid

If the subgrid does not seem to inherit the parent grid’s layout, it’s likely due to incorrect CSS properties or missing subgrid definitions.

Solution

Verify that you’ve set grid-template-columns: subgrid and grid-template-rows: subgrid in the child grid container. Make sure the parent grid is properly defined.

Issue 3: Overlapping Elements

Overlapping elements can occur if grid areas are not specified correctly or if items span multiple rows/columns unintentionally.

Solution

Check your grid area assignments and ensure that items span the intended rows and columns. Adjust your grid definitions as necessary to prevent overlaps.

Advanced Tips and Tricks for CSS Subgrid

To maximize the potential of CSS Subgrid, it’s essential to understand some advanced tips and tricks. These techniques will help you create even more sophisticated and responsive layouts, ensuring your designs stand out and function seamlessly.

Utilizing Subgrid with Named Grid Areas

Named grid areas provide a clearer way to manage your layout, especially when dealing with complex designs. By combining Subgrid with named grid areas, you can achieve precise control over the placement and alignment of your elements.

HTML Structure

<div class="named-grid">
  <div class="header">Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item">Content 1</div>
      <div class="nested-item">Content 2</div>
      <div class="nested-item">Content 3</div>
    </div>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

CSS Styling

.named-grid {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #f8f9fa;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e9ecef;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  grid-area: footer;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

By using named grid areas, you can clearly define and control the layout structure. The .main section utilizes Subgrid, ensuring that its nested items align perfectly with the parent grid’s columns and rows.

Implementing Subgrid for Dynamic Content

Dynamic content, such as user-generated posts or items loaded via AJAX, can benefit from Subgrid by maintaining a consistent layout regardless of the number of items.

HTML Structure

<div class="dynamic-grid">
  <div class="header">Dynamic Header</div>
  <div class="content">
    <div class="nested-container">
      <div class="nested-item">Post 1</div>
      <div class="nested-item">Post 2</div>
      <div class="nested-item">Post 3</div>
      <!-- More items can be added dynamically -->
    </div>
  </div>
  <div class="footer">Dynamic Footer</div>
</div>

CSS Styling

.dynamic-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  background-color: #f8f9fa;
}

.content {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

In this example, the nested grid within the .content section is designed to handle dynamic content. Using repeat(auto-fill, minmax(200px, 1fr)) ensures that the items adjust automatically based on the available space, while maintaining alignment with the parent grid structure.

Creating Interactive Layouts with Subgrid

Interactive layouts, such as those for dashboards or admin panels, can greatly benefit from the precision and flexibility of Subgrid. By using CSS transitions and media queries, you can create interactive elements that adapt seamlessly to user interactions.

HTML Structure

<div class="interactive-grid">
  <div class="header">Interactive Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item">Widget 1</div>
      <div class="nested-item">Widget 2</div>
      <div class="nested-item">Widget 3</div>
    </div>
  </div>
  <div class="sidebar">Interactive Sidebar</div>
  <div class="footer">Interactive Footer</div>
</div>

CSS Styling

.interactive-grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.main {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.sidebar {
  grid-column: 2 / 3;
  background-color: #e9ecef;
}

.footer {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  transition: all 0.3s ease;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.nested-item:hover {
  transform: scale(1.05);
  background-color: #adb5bd;
}

@media (max-width: 800px) {
  .interactive-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .main {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
}

In this interactive layout, the nested grid within the .main section adapts to user interactions with smooth transitions and hover effects. The layout also adjusts based on screen size, ensuring a consistent user experience across different devices.

Subgrid in Real-World Projects

To see Subgrid in action, consider how it can be applied to real-world projects such as e-commerce sites, blogs, and portfolios.

E-commerce Product Grid

For an e-commerce site, a product grid with Subgrid can ensure products are displayed uniformly, enhancing the shopping experience.

HTML Structure

<div class="ecommerce-grid">
  <div class="header">Shop Header</div>
  <div class="products">
    <div class="nested-container">
      <div class="nested-item">Product 1</div>
      <div class="nested-item">Product 2</div>
      <div class="nested-item">Product 3</div>
      <div class="nested-item">Product 4</div>
    </div>
  </div>
  <div class="footer">Shop Footer</div>
</div>

CSS Styling

.ecommerce-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  background-color: #f8f9fa;
}

.products {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
  text-align: center;
}

This e-commerce layout ensures that products are displayed in a consistent and attractive manner, regardless of the number of items.

Enhancing Subgrid with CSS Variables

CSS variables, also known as custom properties, can be used to make your Subgrid layouts even more flexible and maintainable. By defining variables for common values like gaps, column widths, and row heights, you can easily adjust your layout without repetitive changes in your CSS.

HTML Structure

<div class="variable-grid">
  <div class="header">Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item">Content 1</div>
      <div class="nested-item">Content 2</div>
      <div class="nested-item">Content 3</div>
    </div>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

CSS Styling

:root {
  --main-gap: 15px;
  --nested-gap: 10px;
  --column-width: 1fr;
}

.variable-grid {
  display: grid;
  grid-template-columns: var(--column-width) var(--column-width);
  grid-template-rows: auto 1fr auto;
  gap: var(--main-gap);
}

.header {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.main {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.sidebar {
  grid-column: 2 / 3;
  background-color: #e9ecef;
}

.footer {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, var(--column-width));
  gap: var(--nested-gap);
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

By using CSS variables, you can quickly tweak the --main-gap, --nested-gap, and --column-width values to see how your layout changes, making it easier to experiment and find the perfect design.

Combining Subgrid with Flexbox

In some scenarios, you might find that a combination of CSS Grid and Flexbox provides the best layout solution. Flexbox is excellent for one-dimensional layouts (rows or columns), while Grid excels at two-dimensional layouts.

Using Subgrid within a Flexbox layout can offer the best of both worlds.

HTML Structure

<div class="flexbox-grid">
  <div class="header">Header</div>
  <div class="content">
    <div class="flex-container">
      <div class="nested-grid">
        <div class="nested-item">Item 1</div>
        <div class="nested-item">Item 2</div>
        <div class="nested-item">Item 3</div>
      </div>
    </div>
    <div class="flex-item">Sidebar</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS Styling

.flexbox-grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 1 50px;
  background-color: #f8f9fa;
}

.content {
  flex: 1;
  display: flex;
}

.flex-container {
  flex: 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.flex-item {
  flex: 1;
  background-color: #e9ecef;
}

.footer {
  flex: 0 1 50px;
  background-color: #f8f9fa;
}

.nested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

In this layout, the flexbox-grid uses Flexbox to manage the overall layout structure, while the flex-container contains a nested grid using Subgrid. This approach allows for a flexible, responsive design that can handle complex layouts with ease.

Integrating Subgrid with JavaScript

Sometimes, you might need to dynamically adjust your grid layout based on user interactions or data changes. JavaScript can be used to manipulate CSS variables or directly alter grid properties.

HTML Structure

<div class="dynamic-grid">
  <div class="header">Header</div>
  <div class="content">
    <div class="nested-container">
      <div class="nested-item">Content 1</div>
      <div class="nested-item">Content 2</div>
      <div class="nested-item">Content 3</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>
<button id="change-layout">Change Layout</button>

CSS Styling

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.header {
  grid-column: 1 / 4;
  background-color: #f8f9fa;
}

.content {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  grid-column: 1 / 4;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

JavaScript

document.getElementById('change-layout').addEventListener('click', () => {
  document.documentElement.style.setProperty('--column-width', '2fr');
  document.querySelector('.dynamic-grid').style.gridTemplateColumns = 'repeat(2, var(--column-width))';
});

In this example, clicking the “Change Layout” button triggers a JavaScript function that modifies a CSS variable and updates the grid template columns.

This dynamic approach allows you to adjust the layout in response to user interactions or data changes.

Real-World Use Cases of Subgrid

Blog Post Layout

For a blog, a typical layout might include a header, main content area, and sidebar. Using Subgrid ensures that nested elements, like a list of related posts, align perfectly with the overall grid structure.

HTML Structure

<div class="blog-layout">
  <div class="header">Blog Header</div>
  <div class="main">
    <div class="nested-container">
      <div class="nested-item">Post 1</div>
      <div class="nested-item">Post 2</div>
      <div class="nested-item">Post 3</div>
    </div>
  </div>
  <div class="sidebar">Sidebar Content</div>
  <div class="footer">Blog Footer</div>
</div>

CSS Styling

.blog-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.main {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.sidebar {
  grid-column: 2 / 3;
  background-color: #e9ecef;
}

.footer {
  grid-column: 1 / 3;
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

This layout ensures that the main content and sidebar are well-aligned, and the nested posts within the main content follow the grid structure, providing a clean and organized look.

Portfolio Gallery

A portfolio site often needs a grid to showcase projects or artworks. Using Subgrid can help maintain a consistent and responsive layout.

HTML Structure

<div class="portfolio">
  <div class="header">Portfolio Header</div>
  <div class="gallery">
    <div class="nested-container">
      <div class="nested-item">Project 1</div>
      <div class="nested-item">Project 2</div>
      <div class="nested-item">Project 3</div>
      <div class="nested-item">Project 4</div>
    </div>
  </div>
  <div class="footer">Portfolio Footer</div>
</div>

CSS Styling

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  background-color: #f8f9fa;
}

.gallery {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.footer {
  background-color: #f8f9fa;
}

.nested-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.nested-item {
  background-color: #dee2e6;
  padding: 20px;
  border: 1px solid #ced4da;
}

In this portfolio layout, the gallery section uses Subgrid to ensure that projects are displayed consistently and adaptively, regardless of how many items are present.

Wrapping it up

CSS Subgrid is a powerful feature that simplifies the creation of complex, nested layouts by allowing child elements to inherit the grid structure of their parent. This guide has shown you how to set up basic grids, create nested layouts, and utilize advanced techniques like named grid areas, responsive designs, and the combination of Subgrid with Flexbox and JavaScript.

By mastering CSS Subgrid, you can create sophisticated, responsive designs that are easy to maintain and adapt. Whether you’re building dashboards, blogs, e-commerce sites, or portfolios, Subgrid can help ensure your layouts are consistent and visually appealing. Experiment with CSS variables, integrate dynamic content, and explore interactive layouts to fully leverage the potential of CSS Subgrid.