Grid layout - auto

by stopsatgreen

HTML

<div class="grid">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="tre">Three</div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 80px;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-auto-rows: 20px;
}
.grid div { height: 100%; outline: 1px dotted black; }
.one {
    background-color: red;
    grid-column: 1 / 3;
    grid-row: 1;
}
.two {
    background-color: yellow;
    grid-column: 1 / 4;
    grid-row: 2 / 5;
}
.tre { background-color: green; }