row-auto-placement-max-content.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-grid/masonry/tentative/item-placement/row-auto-placement-max-content.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<link rel="help" href="https://drafts.csswg.org/css-grid-3">

<link rel="match" href="row-auto-placement-max-content-ref.html">

<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">

<style>

html,body {

  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;

.masonry {

    display: masonry;

    background: gray;

    position: relative;

    item-tolerance: 0;

    masonry-direction: row;

    grid-template-rows: auto auto auto;

    width: max-content;

    padding: 10px;

</style>

<body>

  <p>Ensure that masonry containers are sized correctly under max-content constraints even if the items do not have the max-content style.</p>

  <div class="masonry">

    <div style="background: lightskyblue;">

      Number 1

    </div>

    <div class="second-track" style="background: lightcoral;">

      Number 2

    </div>

    <div class="third-track" style="background: lightgreen;">

      Number 3

    </div>

    <div style="grid-row: span 2; background: brown;">

      Number 4

    </div>

  </div>

</body>

</html>