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

Pat66OP•8mo ago

I don t know what is going wrong

ἔρως•8mo ago

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

Pat66OP•8mo ago

see this

Pat66OP•8mo ago

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

Patrick L

CodePen

QWPRWMX

...

ἔρως•8mo 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

Pat66OP•8mo ago

thanks I didn t see the mistakes

ἔρως•8mo ago

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

Pat66OP•8mo 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•8mo ago

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

Pat66OP•8mo ago

I remove it on the .pic element

Mannix•8mo 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

Pat66OP•8mo ago

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

Mannix•8mo ago

it can't be the same across multiple rows

Pat66OP•8mo ago

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

Mannix•8mo 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"

Pat66OP•8mo ago

ok thanks guy he work

ἔρως•8mo 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