[CSS] Use grid-template to make your CSS Grid declarations more readable

In previous post: https://www.cnblogs.com/Answer1215/p/13527076.html

Code:

.banner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: minmax(30vh, 1fr) minmax(30vh, 1fr);
    grid-gap: 1rem;
}

.promo:first-child {
    grid-column: 1 / 2;
    grid-row: span 2;
}

.promo:nth-child(2) {
    grid-column: 2 / 4;
}

 

To make it more readable:

.banner {
    display: grid;
    /*grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: minmax(30vh, 1fr) minmax(30vh, 1fr);*/
    grid-template: "main second second" minmax(30vh, 1fr)
                   "main third fourth" minmax(30vh, 1fr) / 
                    2fr  1fr   1fr;
    grid-gap: 1rem;
}

.promo:first-child {
    /*grid-column: 1 / 2;
    grid-row: span 2;*/
    grid-area: main
}

.promo:nth-child(2) {
    grid-area: second;
}

 

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

/* grid-template-rows / grid-template-columns values */