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

by

You can use display:contents (https://caniuse.com/#feat=css-display-contents) to overcome this:

#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>

Or use display table like 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>

More Related Contents:

  1. Centering in CSS Grid
  2. Flex / Grid layouts not working on button or fieldset elements
  3. Center and bottom-align flex items
  4. Last margin / padding collapsing in flexbox / grid layout
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. Make a grid item span to the last row / column in implicit grid
  10. CSS grid square layout [duplicate]
  11. How to target a specific column or row in CSS Grid Layout?
  12. Preventing double borders in CSS Grid
  13. Grid areas not laying out properly in CSS Grid
  14. Why display grid with 100% in grid-template-columns goes out of body?
  15. CSS grid – maximum number of columns without media queries
  16. All widths set to width of widest element
  17. Make flex items overlap
  18. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  19. How to make images stay within the rows of a css grid container?
  20. Equal width columns in CSS Grid
  21. CSS grid wrapping
  22. How can I create a row-based masonry layout using CSS?
  23. Items that span all columns/rows using CSS grid layout
  24. Change the column order in a css grid
  25. Why does CSS Grid layout add extra gaps between cells?
  26. What are the default values for justify-content & align content?
  27. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  28. pseudo-element acting like a grid item in CSS grid
  29. How to calc() the number of rows in a grid template?
  30. CSS Grid Row Height Safari Bug

Leave a Comment