How to flatten nested divs to display them in a CSS grid?

Question

I generate a table (with vue.js) from an object which is supposed to be two columns wide. Each of the columns comes from the key and value of the object. This is equivalent

Answer 1

Grid properties aren't applying to your content divs because these divs are out-of-scope.

Grid formatting is limited to the parent-child relationship. This means that a grid container is always the parent and a grid item is always the child. Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

Because your content divs are two levels down from the grid container (#table), making them grandchildren not children, they are not grid items and will not accept grid properties.

More details: Grid properties not working on elements inside grid container

---

There are exceptions to the rule above, but they don't have much or any browser support.

display: contents is covered in another answer to this post. It enables an element to be ignored as a containing block by the parent, so the parent will recognize its grandchildren as normal children. But for now this method is effectively useless for production purposes, as it has weak browser support.

The more appropriate solution in this case would be display: subgrid, which enables the descendants of a grid container beyond the children (i.e., the children of grid items) to respect the lines of the container. But this feature has no browser support.

More details: Positioning content of grid items in primary container (subgrid feature)

---

If you want a pure CSS solution, maybe a combination of grid and flex can help.

Here's a general concept. No changes to the HTML.

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

#table > div {
  display: flex;
}

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

  

    

      this is something long on the first row
    
    

      short 1st row
    
  
  

    

      wazaa 2nd row
    
    

      wazii 2nd row