JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div class="grid-container">
    <div class="grid-item">…</div>
</div>

CSS

.grid-container {
    display: grid;
    grid-template-areas: 'a b b' 'a c d';
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px auto;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-auto-rows: 80px;
/* Given the above properties, is this shorthand valid? */
    grid: repeat(3, 1fr) / 'a b b' 80px 'a c d' row 1fr / 80px;
}
.grid-item {
    background-color: #DDD;
    grid-column: 3 / 5;
    grid-row: 2 / span 2;
    height: 100%;
}

JavaScript

/* QUESTION

The Grid Layout spec says:

“Note that you can only specify the explicit or the implicit grid properties in a single grid declaration.”

Does that mean the shorthand in the CSS pane is invalid?

If so, why? All properties seem to be valid, so curious why the shorthand can’t work that way.
*/