CODEWITHSUNDEEP
cssalignmentcss-grid
Ian Dunn
Ian Dunn

Reputation: 3680

Equal height children of grid items

With the Grid spec, I understand how to align the children of a grid container, but I want to align elements within the children, as if they were the grid items, rather than their container.

Essentially, I want something that looks like this:

Grid-item sub-elements aligned as described above

Within each row, the cells have equal heights with their neighboring cells. Each row is independent of each other, though. The headers in the first row are 2 lines tall, but the headers in the 2nd row are 3 lines tall.

The content within each element is unknown, and the number of items is also unknown. So the alignment must be able applied dynamically, rather than hard-coding the height of any specific cell.

If I understand it correctly, the elements within the grid item are not themselves grid items, though. Is it possible to align them as if they were?

display: contents is starting to be supported by browsers, I don't think combining it with grid-template-areas would work, because in this case the number of grid items is dynamic.

main {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 20px 20px;
}

header { background-color: lightblue }
.content { background-color: lightgreen }
footer { background-color: yellow }
<html>
  <body>
    <main>
      
      <article>
        <header>head</header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mi diam. Sed pulvinar ex et consectetur venenatis. Duis ligula odio, lobortis a pretium vel, auctor a ante. Nullam nec sem ante. Ut ut interdum metus.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head head head head head head head head head head </header>
        <div class="content">Pellentesque sed nisl vel velit porta mattis. Sed luctus euismod mi, in viverra mi lacinia in. Donec euismod magna metus, vel lacinia sem dignissim non.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Nulla pretium id enim quis rutrum. Donec lacinia mauris vel risus volutpat facilisis.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Pellentesque ut scelerisque nisl, ut cursus velit.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">lorum ipsum.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>headhead head head head head head head head head head head head head head head </header>
        <div class="content">Donec porttitor massa purus. Pellentesque hendrerit placerat risus vitae hendrerit. Fusce vitae elit dictum, pharetra lacus sodales, volutpat enim.</div>
        <footer>foot</footer>
      </article>
      
    </main>
  </body>
</html>

Upvotes: 5

Views: 2018

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371113

Unless you can use display: subgrid or display: contents (more info below), the only way to achieve this behavior with CSS alone would be to put all children of the various grid items in a single grid container. In other words, make them all siblings.

The problem is that an element in one container has no idea what its cousin in another container is doing. They have no direct connection, which prevents them from working together. Siblings, on the other hand, have no problem working together.

Note that "flattening" HTML documents for the purposes of CSS is not recommended as it damages semantics and accessibility.

More information:

Upvotes: 3

Related Questions