Gridbereiche
Ein Gridbereich besteht aus einer oder mehreren Gridzellen, die zusammen einen rechteckigen Bereich im Grid bilden. Gridbereiche werden erstellt, wenn Sie ein Element mit linienbasierter Platzierung positionieren oder wenn Sie Bereiche mit benannten Gridbereichen definieren.
Gridbereiche müssen rechteckig sein; es ist nicht möglich, zum Beispiel einen T- oder L-förmigen Gridbereich zu erstellen.
Beispiel
Im folgenden Beispiel habe ich einen Grid-Container mit zwei Grid-Elementen. Ich habe diese mit der grid-area-Eigenschaft benannt und sie dann mithilfe von grid-template-areas im Grid angeordnet. Dies erzeugt zwei Gridbereiche, einen der vier Gridzellen abdeckt und einen weiteren mit zwei.
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
html
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>