I am trying to create a grid where the last cell on the first row is empty by using '.' with CSS grid-template-areas. As far as I am aware every shape is a rectangle.Here is the desired layout:
Contrast: Default Low
Font-size: Default Large Extra large
Spacing: Default Wide Extra wide
But it keeps coming out like this:
Contrast: Default Low Font-size:
Default Large Extra-large Spacing:
Default Wide Extra wide
I have copied from 3 different tutorials, but I am still stuck.
code:
.1 {
grid-area: 1;
}
.2 {
grid-area: 2;
}
.3 {
grid-area: 3;
}
.4 {
grid-area: 4;
}
.5 {
grid-area: 5;
}
.6 {
grid-area: 6;
}
.7 {
grid-area: 7;
}
.8 {
grid-area: 8;
}
.9 {
grid-area: 9;
}
.10 {
grid-area: a;
}
.11 {
grid-area: b;
}
.accessibilityGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "1 2 3 ." "4 5 6 7" "8 9 a b";
}
<div class="accessibilityGrid">
<div class="1">Contrast:</div>
<div class="2">Default</div>
<div class="3">Low</div>
<div class="4">Font-size:</div>
<div class="5">Default</div>
<div class="6">Large</div>
<div class="7">Extra large</div>
<div class="8">Letter-spacing:</div>
<div class="9">Default</div>
<div class="10">Wide</div>
<div class="11">Extra wide</div>
</div>