Wrap CSS grid with auto placement

Question

I\'m trying to build a grid that contains card-like items. The cells of each type (headline, image, text, button, ...) should have equal height in each row, determined by th

Answer 1

This is a good example of a situation when we need sub-grids - aligning the grid cousins is essential in layouts such as in this question.

Until browsers implement the proposed Level 2 spec of Subgrids, we can only wrap each column in an element and then wrap it using an outer grid container.

The below is an excerpt from the Editor's Draft for CSS Grid Layout Module Level 2:

2.  Subgrids

A grid item can itself be a grid container by giving it display: grid; in this case the layout of its contents will be independent of the layout of the grid it participates in.

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.

A good read that discussed this problem can be found here.

Here's a mock-up using nested grid containers (sub-grids can look like this but without breaking the non-equal cousins rule) - see demo below:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  justify-items: flex-start;
  border: 1px solid #07c;
}

img {
  width: 100%;
}

button {
  align-self: center;
  justify-self: center;
}

p {
  padding: 0 10px;
}

  

    
Header 1
    
    
text
    
    Button
  

  

    
Header 2 is longer and may span multiple lines
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
    
    Button
  

  

    
Header 1
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget.
    
    Button
  

  

    
Header 1
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget. Suspendisse pulvinar arcu massa, quis
      varius velit facilisis tincidunt. Proin sed cursus orci.
    
    Button
  

  

    
Header 1
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    Button
  

A possible definition could be:

.wrapper {
  display: grid; /* outer grid */
  /* sets a wrapping grid container with items of width around 400px */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
}

.grid {
  grid-row: span 4; /* span 4 rows */
  display: grid;
  /* magic is here */
  grid-template-rows: subgrid; /* create a sub-grid with the 4 parent grid rows */
}