CODEWITHSUNDEEP
htmlcsscss-grid
NoOneCare
NoOneCare

Reputation: 43

Implicit grid area naming

Is it possible in CSS to use named grid areas i.e. grid-area: 'a' without having to declare each one?
I want to utilize this for the grid-template-areas declaration.

.manSection {
  display: grid;
  height: 700px;
  width: 200px;
  grid-template-areas:
    ". a ."
    "b . c"
    ". d ."
    ". e ."
    ". f ."
    "k . g"
    "r . p"
    ". h .";
  row-gap: 10px;
}
<section class="manSection">
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
</section>

Upvotes: 2

Views: 94

Answers (1)

Zach Jensz
Zach Jensz

Reputation: 4078

It doesn't seem possible with current CSS unfortunately.

You would be able to write a sass function to loop through each span and give it a grid area with :nth-child() selectors but this would still result in the same CSS nonetheless.

I thought it might be possible with counters to automatically go through each span and assign an explicit grid area, though the grid area property won't accept string values so it's incompatible with counters. The following doesn't work:

.manSection {
  display: grid;
  height: 700px;
  width: 200px;
  grid-template-areas:
    ". a ."
    "b . c"
    ". d ."
    ". e ."
    ". f ."
    "k . g"
    "r . p"
    ". h .";
  row-gap: 10px;
  counter-reset: mygrid;
}

.manSection > span {
  counter-increment: mygrid;
  grid-area: counter(mygrid, alphabetic);
}
<section class="manSection">
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
</section>

Upvotes: 1

Related Questions