Html Question posted in
Some basic documentation can be found here.

Html – How to specify height for merged rows in grid?

I have a grid layout defined using CSS Grid, and I want to achieve a specific layout with designated heights for certain areas. The desired grid layout looks like this:

A B C
A D E
F G E

I want the height of the area A to be 96px and the height of the area E to be 48px. All other areas should adjust their height automatically (auto).

Here’s the CSS and HTML I am currently using:

<div class="table">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>

.table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "a b c"
    "a d e"
    "f g e";
  gap: 5px;
}

.table > div {
  border: 1px solid black;
}

.a {
  grid-area: a;
  height: 96px;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
  height: 48px;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

When I set the height for the A and E areas, the layout becomes misaligned. It seems that setting the height directly on a grid cell causes the entire layout to behave unexpectedly.

How can I set the height for specific grid areas (A and E) while keeping the layout intact and allowing other areas to adjust their height automatically?

Tags:

4

Answers


  1. 0

    I think you need to modify the grid definition and avoid directly setting heights on grid items.

    Try this:

    .table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "a b c"
    "a d e"
    "f g e";
  gap: 5px;
}

.table > div {
  border: 1px solid black;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.table .a {
  height: 96px;
}

.table .e {
  height: 48px;
}

.table .b,
.table .c,
.table .d,
.table .f,
.table .g {
  align-self: stretch;
}

    Hope that helps 🙂

    Login or Signup to reply.
  2. 0

    I recommend always starting your css code with

    * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

    Also you need to set grid-template-rows: auto 48px auto; that .e is not go outside the grid:

    * {
  box-sizing: border-box;
}

.table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: auto 48px auto;
  grid-template-areas:
    "a b c"
    "a d e"
    "f g e";
  gap: 5px;
}

.table > div {
  border: 1px solid black;
}

.a {
  grid-area: a;
  height: 96px;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
  height: 48px;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}
    <div class="table">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>
    Login or Signup to reply.
  3. 0

    To achieve the desired grid layout with specific heights for certain areas while keeping the layout intact, it’s better to control the row heights through the grid-template-rows property rather than setting heights directly on the individual grid items. Here’s how you can modify your CSS:

    1. Define the grid layout.
    2. Set the heights for the rows in grid-template-rows.

    Here’s how you can do it:

    <div class="table">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>

    .table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: 96px auto 48px;
  grid-template-areas:
    "a b c"
    "a d e"
    "f g e";
  gap: 5px;
}

.table > div {
  border: 1px solid black;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

    Explanation

    1. Grid Columns and Rows:

      • grid-template-columns: 96px 1fr 48px; defines three columns with specified widths.
      • grid-template-rows: 96px auto 48px; sets the heights of the rows where:
        • The first row (containing "A") is 96px.
        • The second row (containing "D" and partially "A" and "E") adjusts automatically.
        • The third row (containing "E" again) is 48px.

    2. Grid Areas:

      • grid-template-areas assigns named areas to the grid items.

    This approach avoids directly setting the height on the grid items, which can cause the layout to become misaligned. Instead, it leverages the grid-template-rows property to control the height of the rows, ensuring the layout remains consistent and the heights are applied correctly.

    Login or Signup to reply.
  4. 0 
        .table {
      display: grid;
      grid-template-columns: 96px 1fr 48px;
      grid-template-rows: auto auto auto;
      gap: 5px;
    }
        <div class="table">
      <div class="">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
      </div>

      <div class="">
        <div class="a">A</div>
        <div class="d">D</div>
        <div class="e">E</div>
      </div>
      <div class="">
        <div class="f">F</div>
        <div class="g">G</div>
        <div class="e">E</div>
      </div>
    </div>
    <div class="table">
  //instead of using divide each column under a div
  <div class="">
     <div class="a">a</div>
     <div class="b">b</div>
     <div class="c">c</div>
  </div>

  <div class="">
     <div class="a">A</div>
     <div class="d">D</div>
     <div class="e">E</div>
  </div>
  <div class="">
     <div class="f">F</div>
     <div class="g">G</div>
     <div class="e">E</div>
  </div>
</div>


// remove the areas 
// add what you want of style for each element

.table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: auto auto auto;
  gap: 5px;
}

    might it helps with your idea

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search