Guidelines for arranging nested divs in a CSS grid for a flat display

Question

Guidelines for arranging nested divs in a CSS grid for a flat display

When using vue.js, I create a table from an object that should have two columns. Each column is generated from the key and value of the object. Here is the equivalent HTML:

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

To format these div into a 2x2 grid, I use CSS grid with the following code:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

However, the result does not match my expectation. The two deepest div stack on top of each other instead of aligning in the defined grid.

I want them to follow the grid behavior and align based on the column templates. How can I achieve this?

html css css-grid

Answer 1

Answer №1

If you want to tackle this issue, you have the option of using display:contents. You can find more information about it here: https://caniuse.com/#feat=css-display-contents

#table {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap:10px;
}

#table > div {
  display: contents;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Alternatively, you can also utilize the display table property as shown below:

#table {
  display: table;
}

#table > div {
  display: table-row;
}
#table > div > div {
  display: table-cell;
  padding: 5px;
}
#table > div > div:first-child {
  white-space: nowrap;
  width: 10%;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Answer 2

If you want to tackle this issue, you have the option of using display:contents. You can find more information about it here: https://caniuse.com/#feat=css-display-contents

#table {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap:10px;
}

#table > div {
  display: contents;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Alternatively, you can also utilize the display table property as shown below:

#table {
  display: table;
}

#table > div {
  display: table-row;
}
#table > div > div {
  display: table-cell;
  padding: 5px;
}
#table > div > div:first-child {
  white-space: nowrap;
  width: 10%;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Answer 3

Answer №2

Your content divs are not applying grid properties because they are considered out-of-scope elements.

In grid formatting, the relationship is limited to parent-child connections. A grid container always acts as the parent, while a grid item serves as the child. Elements beyond the immediate children of a grid container do not fall within the grid layout and therefore do not respond to grid properties.

In your case, the content divs are two levels removed from the grid container (#table), making them grandchildren rather than direct children. As grandchildren, they are not recognized as grid items and thus will not inherit grid properties.

For more information, visit: Grid properties not working on elements inside grid container

Although there are exceptions to this rule, they are not widely supported by browsers.

The display: contents property, explained in another answer to this post, allows an element to be treated as if it were not a containing block. However, this method currently lacks robust browser support, rendering it impractical for production use.

An alternative approach could involve using display: subgrid, which extends grid behavior to descendants of grid items. Unfortunately, this feature is not yet supported by browsers.

For further insights, check: Positioning content of grid items in primary container (subgrid feature)

If seeking a pure CSS solution, consider combining grid and flexbox techniques.

Here's a basic concept with no HTML changes required:

#table {
  display: grid;
  grid-template-columns: 1fr;
}

#table > div {
  display: flex;
}

#table > div > div {
  flex: 1;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Answer 4