</div>
<div class="grid-row">
<div class="grid-row-span-2">
<div class="gamma">gamma</div>
<div class="delta">delta</div>
</div>
<div class="epsilon">epsilon</div>
</div>Gridsyntaxtakessomefiddlingandpracticetounderstand.First,wetriggeragrid
layoutwithdisplay: grid.Next,wedefineourcolumn,row,andgutter(thespace
betweencolumnsandrows)widths.Thisisalldoneonthegridcontainerelement:
.grid {
display: grid;
grid-template-columns: 210px 20px 1fr 20px;
➥ /* column size, gutter size, column, gutter, column */
grid-template-rows: auto 20px auto 20px auto 20px;
➥ /* row size, gutter size, row, gutter, row */
}Limited Browser Support
Browsersupportforgridlayoutisverymuchinflux.Theexampleshereworkin
ChromeandMicrosoftEdgewithvendorprefixes.However,thelatestversionof
thespecificationincludespropertiesandunitsthatmaymakethissyntaxobsolete.Thenwecandefinethecolumnand/orrowspansforeachchildelementofthegrid:
.alpha {
grid-column: 1 / 2;
}
.beta {
grid-column: 3 / 6;
}
.gamma {
grid-column: 1 / 4;
grid-row: 3 / 5;
}
.delta {
grid-column: 1 / 4;
grid-row: 7 / 10;Conclusion 353