Member Avatar for Virat_4

HTML:

<div class="container">
      <div class="header">header</div>
      <div class="leftsidebar">leftsidebar</div>
      <div class="main-top">main top</div>
      <div class="rightsidebar">right side bar</div>
      <div class="bottom-left">bottom left</div>
      <div class="bottom-right">bottom right</div>
      <div class="footer">footer</div>
    </div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "leftsidebar main-top main-top rightsidebar"
    "leftsidebar bottom-left bottom-right rightsidebar"
    "footer footer footer footer";
}

.header {
  background-color: skyblue;
  grid-area: header;
}
.leftsidebar {
  background-color: green;
  grid-area: leftsidebar;
}
.main-top {
  background-color: red;
  grid-area: main-top;
}
.rightsidebar {
  background-color: pink;
  grid-area: rightsidebar;
}
.bottom-left {
  background-color: purple;
  grid-area: bottom-left;
}
.bottom-right {
  background-color: yellow;
  grid-area: bottom-right;
}
.footer {
  background-color: blue;
  grid-area: footer;
}
  • 2 Contributors
  • 1 Reply
  • 71 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gce517

Dani AI

Generated

Good catch, — and , the root cause is a mismatch between the area map and your explicit track definitions. Your grid-template-areas rows each list four tokens (so the layout expects four columns and four area-rows), while the explicit grid-template-columns and grid-template-rows you provided declare fewer tracks. The browser fills the gap with implicit tracks (auto-sized), which is why the two bottom boxes end up different widths.

How to fix it (quick checklist):

  • Count the tokens in each grid-template-areas row; that number is the required column count. Make your grid-template-columns declare the same number of tracks.
  • Count the area rows and make grid-template-rows match, or reduce the number of area rows to match your rows setting.
  • Use . for empty cells when you need gaps. You can also use the repeat() shorthand to keep things tidy.
  • Verify each grid-area name exactly matches the name used in the areas map.

Debugging tips:

  • Turn on the CSS Grid overlay in DevTools (Chrome/Firefox) to see explicit vs implicit tracks and line numbers.
  • If a column still refuses to shrink, check child content: long words or images can force a column wider. Add min-width: 0 or use overflow on the grid items to allow fr-based tracks to behave as expected.
  • A global box-sizing: border-box and resetting body margins can also prevent surprising sizing issues.

Apply those checks and the layout will behave predictably.

Member Avatar for gce517

The problem is in your column distribution.

Try this:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "leftsidebar main-top main-top rightsidebar"
    "leftsidebar bottom-left bottom-right rightsidebar"
    "footer footer footer footer";
}

This will fix bottom-left, bottom-right, and also both side bars.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.