Subgrid & Native CSS Nesting

Subgrid Layouts

Subgrid allows child elements of a grid to inherit the parent’s grid tracks (rows or columns) instead of defining their own. This ensures perfect alignment across nested grids without repeating track definitions.

Basic Example:

<div class="parent">
  <div class="child">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="child">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
</div>

/* Parent grid */
.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3-column layout */
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}

/* Child grid inheriting parent columns */
.child {
  display: grid;
  grid-template-columns: subgrid; /* Align with parent columns */
  gap: 10px;
  background-color: #e0e0e0;
  padding: 10px;
  border-radius: 8px;
}

/* Individual items styling */
.child div {
  background-color: #4caf50;
  color: white;
  padding: 15px;
  text-align: center;
  border-radius: 4px;
}

Combining Subgrid with Nested Grids

When using nested grids, combining them with CSS Subgrid ensures that child grids automatically align with the parent’s rows or columns. This creates clean, consistent layouts without duplicating column or row definitions, making complex designs easier to maintain and responsive-friendly.

<div class="outer">
  <div class="inner">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
  <div class="inner">
    <div>Item A</div>
    <div>Item B</div>
  </div>
</div>

/* Outer parent grid */
.outer {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Two-column layout */
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* Inner child grid inheriting parent columns */
.inner {
  display: grid;
  grid-template-columns: subgrid; /* Aligns with parent columns */
  gap: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  border-radius: 6px;
}

/* Items inside inner grid */
.inner div {
  background-color: #4caf50;
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 4px;
}

Native CSS Nesting

Native CSS nesting lets you write nested rules directly, similar to Sass/LESS, making CSS more readable and maintainable.

The & symbol represents the parent selector.
Nested rules can include child elements, pseudo-classes, and media queries.
Styles remain scalable and easy to manage, especially for component-based design.

Example :

<div class="card">
  <h2>Card Title</h2>
  <p>This is a description inside the card.</p>
</div>

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background 0.3s ease;

  & h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
  }

  & p {
    color: gray;
    line-height: 1.5;
  }

  &:hover {
    background: lightblue;
  }
}

Combining Subgrid & Nesting

<div class="grid">
  <div class="post">
    <h2>Post Title 1</h2>
    <p>This is the first post description. It aligns perfectly with the grid.</p>
  </div>
  <div class="post">
    <h2>Post Title 2</h2>
    <p>This is the second post description. The layout is consistent and neat.</p>
  </div>
</div>

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

  .post {
    display: grid;
    grid-template-rows: subgrid; /* Inherit parent rows */
    grid-row: span 2;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    transition: background 0.3s ease;

    h2 {
      grid-row: 1;
      font-size: 1.2em;
      margin: 0 0 10px 0;
      color: #333;
    }

    p {
      grid-row: 2;
      line-height: 1.6;
      color: #555;
    }

    &:hover {
      background: #e0e0e0;
    }
  }
}