row-auto-repeat-001-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<style>

.grid {

    display: grid;

    grid-template-rows: repeat(auto-fill, 100px);

    grid-template-columns: 100px 100px 100px;

    background: gray;

    width: 300px;

    height: 300px;

</style>

<body>

  <div class="grid">

    <div style="background: lightskyblue;">

      Number 1

    </div>

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

      Number 2

    </div>

    <div style="background: lightgreen; grid-row: 3;">

      Number 3

    </div>

    <div style="background: lightpink;">

      Number 4

    </div>

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

      Number 5

    </div>

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

      Number 6

    </div>

  </div>

</body>

</html>