0

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Ambassador Kosh
  • 459
  • 5
  • 19
  • 1
    I do not think the duplicate helps you. Here the trouble is that you used plain numbers to set class names and also areas (twice a reason it won't work) . if you use plain numbers, use always a letter in front of them for id,class and areas https://codepen.io/gc-nomade/pen/QWKaqLb – G-Cyrillus Dec 28 '20 at 18:49
  • @G-Cyrillus A link to/quote of the spec that mentions letter requirements for grid-area names might be helpful too. – TylerH Dec 28 '20 at 19:35
  • 1
    @TylerH i was looking for an efficient duplicate here on SO( but probably missing the right english keywords ... idem for the spec , it must be standing on a notation page aside for global rule/standard )... :( – G-Cyrillus Dec 28 '20 at 19:39
  • 1
    @G-Cyrillus I would guess https://www.w3.org/TR/css-grid-1/#grid-template-areas-property if anything -- if you're ever not sure about a dupe closure, feel free to drop into https://chat.stackoverflow.com/rooms/29074/html-css-webdesign and discuss / ask for input -- at least 2 [tag:css] gold badgers regularly stop by there and sometimes Boltclock, too. – TylerH Dec 28 '20 at 19:41
  • 1
    here is probably the reference about the first charactere : https://www.w3.org/TR/css-syntax-3/#name-start-code-point ;) – G-Cyrillus Dec 28 '20 at 19:55
  • 1
    @G-Cyrillus it was a duplicate for the initial question and now it was changed completely (updated the duplicate list) – Temani Afif Dec 28 '20 at 22:19
  • 1
    It's working :) thank you. And thank you for the lesson about naming classes! – Ambassador Kosh Dec 29 '20 at 10:03

0 Answers0