Grid template areas

I want build this layout https://pastebin.com/uydnvxWY my css:

.members{
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: .5em;
      grid-template-areas: "item . item item . item . "
                           ". item . . item . item" 
                           "item item . item . item item"
                            "item . . item item . item"
                            "item . item item . item ."
                            ". item . . item . item"
                            "item item . item . item .";

}
.pic{
    grid-area: item;
}

.members{
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: .5em;
      grid-template-areas: "item . item item . item . "
                           ". item . . item . item" 
                           "item item . item . item item"
                            "item . . item item . item"
                            "item . item item . item ."
                            ". item . . item . item"
                            "item item . item . item .";

}
.pic{
    grid-area: item;
}

the result

Pastebin

- Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

17 Replies

Pat66•3mo ago

I don t know what is going wrong

ἔρως•3mo ago

well, you used pastebin instead of codepen or jsfiddle, so, that's something you did "wrong"

Pat66•3mo ago

see this

Pat66•3mo ago

https://codepen.io/alpha_66/pen/QWPRWMX

Patrick L

CodePen

QWPRWMX

...

ἔρως•3mo ago

so, this is the basic html structure:

<ul class="members">
  <li>
    <div class="pic">
      <img src="" alt="">

<ul class="members">
  <li>
    <div class="pic">
      <img src="" alt="">

you have the grid on .members and the grid-area on .pic this won't work, because .pic isn't in the grid set by .members if you want to do this "the easy way", you can just have dummy elements otherwise, you need a new grid area per element

Pat66•3mo ago

thanks I didn t see the mistakes

ἔρως•3mo ago

its fine, it is very easy to miss this but, if i were you, i would shove a div inside a list

Pat66•3mo ago

I put un class on li but he don t work

  <li class="item" ><div class="pic">1<img src="assets/h5.jpg" alt=""> </div></li>
                <li class="item"><div class="pic">1<img src="assets/h1.jpg" alt=""> </div></li>

  <li class="item" ><div class="pic">1<img src="assets/h5.jpg" alt=""> </div></li>
                <li class="item"><div class="pic">1<img src="assets/h1.jpg" alt=""> </div></li>

.item{
    grid-area: item;
}

.item{
    grid-area: item;
}

I d on t understand "dummy elements"

Mannix•3mo ago

you can't have the same area name in multiple places your grid-template-area property is invalid check the dev tools

Pat66•3mo ago

I remove it on the .pic element

Mannix•3mo ago

 grid-template-areas: "item . item item . item . "
                           ". item . . item . item" 
                           "item item . item . item item"
                            "item . . item item . item"
                            "item . item item . item ."
                            ". item . . item . item"
                            "item item . item . item .";

 grid-template-areas: "item . item item . item . "
                           ". item . . item . item" 
                           "item item . item . item item"
                            "item . . item item . item"
                            "item . item item . item ."
                            ". item . . item . item"
                            "item item . item . item .";

this is not valid

Pat66•3mo ago

I change it https://codepen.io/alpha_66/pen/QWPRWMX

Mannix•3mo ago

it can't be the same across multiple rows

Pat66•3mo ago

I don t understand your last message I should have 7 column and 7 rows

Mannix•3mo ago

each child has to have unique grid-name item1 item2 item3 etc

grid-template-areas: 
"item1 . item2 item2 . item3 ."
". item4 . . item5 . item6"

grid-template-areas: 
"item1 . item2 item2 . item3 ."
". item4 . . item5 . item6"

Pat66•3mo ago

ok thanks guy he work

ἔρως•3mo ago

that is what i said it's a lot easier to use empty elements to fill the gap, and then hide them on mobile

Gaming

Programming

Grid template areas