Support for layouts with nested CSS grids and auto-height rows

[charliesneath]

• This issue was originally posted as a follow-up to Support for flexible row heights based on content size #2342.
• This layout only uses CSS grid and demonstrates example of the layout I'm trying to recreate with Weasyprint; the previous example mixed in flex.
• The title might need to change to reflect the issue more correctly; I'm not exactly sure what the primary issue is.

Overview

• The .container is a grid with a single row and column. This represents the page the layout will fill.
• The .layout is a grid with a single column and a dynamic number of rows (3 in this example)
• Each .row is a grid with a single row, but a number of columns (.cell) equal to the number of children photos/images
• The images themselves are set to object-fit: constrain so that they will retain their original aspect ratio, but expand to fill available space.

My expectation is that the layout .row heights adjust to the size of the content, since they will be different sizes depending on the orientation of images on this page.

(Note that I'm hard-coding the grid-template-columns value for the .rows in this example, but I would just use some CSS variables with the template to make this dynamic.)

Here's a view leveraging Chrome's grid inspector:

Chrome Output

Weasyprint Output

I might be missing a few lines of CSS to make this snap into place, but here's the output I'm getting currently.

CSS

.container {
  display: grid;
  width: 500px;
  height: 600px;
  background-color: black;
  padding: 50px;
  box-sizing: border-box;

  .layout {
    display: grid;
    padding: 50px;
    background-color: white;
    min-height: 0;

    .row {
      display: grid;
      border: 1px dashed black;
      justify-content: center;
      min-height: 0;
      min-width: 0;

      &#row-1 {
	grid-template-columns: 1fr 1fr;
      }

      &#row-2 {
	grid-template-columns: 1fr;    
      }

      &#row-3 {
        grid-template-columns: 1fr;
      }

      .cell {
        max-height: 100%;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        border: 1px solid black;

	&.portrait {
	  background-color: lightgreen;
	}

	&.landscape {
	  background-color: lightblue;
	}
      }

      img {
        object-fit: contain;
        max-height: 100%;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        border: 1px solid black;
	height: 100%;
	width: 100%;
	display: block;
      }
    }
  }
}

HTML

<div class="container">
  
  <div class="layout">

    <div class="row" id="row-1">
      <div class="cell"><img src="{% static 'images/landscape.png' %}" /></div>
      <div class="cell"><img src="{% static 'images/landscape.png' %}" /></div>
    </div>

    <div class="row" id="row-2">
      <div class="cell"><img src="{% static 'images/portrait.png' %}" /></div>
    </div>
    
    <div class="row" id="row-3">
      <div class="cell"><img src="{% static 'images/landscape.png' %}" /></div>
    </div>
    
  </div>
  
</div>