How to target specific elements for custom layout with CSS Grid?

Question

I need to reproduce this design with CSS Grid and I'm trying to target specific grid elements to get the result without success.

This is what I have at the moment, I need to fix some stuff but I want to get the structure right before.

Attaching code snippet:

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  gap: 30px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                             <div class="grid-item"></div>                                        
</div>

I already tried to use grid-template-rows as well to modify the layout but without success, any advice?

Add an id while generating the divs and use those id's to apply styles — Abhinav Nigam
– Abhinav Nigam, Commented Jan 3, 2023 at 13:46
Try the grid-row and grid-column properties on the irregular elements. — Oskar Grosser
– Oskar Grosser, Commented Jan 3, 2023 at 13:47
the grid items are generated dynamically, that's why I was trying to modify them only using CSS grid layout system, I cannot add selectors to specific grid items — giosan
– giosan, Commented Jan 3, 2023 at 13:50
You could use the :nth-child() (and similar) pseudo-class to target specific elements, which allows you to use grid-row & grid-column, or grid-template-areas & grid-area. — Oskar Grosser
– Oskar Grosser, Commented Jan 3, 2023 at 14:19

pier farrugia · Accepted Answer · 2023-01-03 14:15:17Z

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  grid-template-rows: repeat(5, minmax(30px, auto));
  gap: 10px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

.div1 {
  grid-area: 1 / 1 / 4 / 2;
  height: 100%;
}

.div38 {
  grid-area: 4 / 1 / 6 / 2;
  height: 100%;
}

.div39 {
  grid-area: 4 / 2 / 5 / 6;
  width: 100%;
}

.div40 {
  grid-area: 4 / 6 / 5 / 10;
  width: 100%;
}

.div41 {
  grid-area: 4 / 10 / 5 / 14;
  width: 100%;
}

.div42 {
  grid-area: 5 / 2 / 6 / 4;
  width: 100%;
}

.div43 {
  grid-area: 5 / 4 / 6 / 6;
  width: 100%;
}

.div44 {
  grid-area: 5 / 6 / 6 / 8;
  width: 100%;
}

.div45 {
  grid-area: 5 / 8 / 6 / 10;
  width: 100%;
}

.div46 {
  grid-area: 5 / 10 / 6 / 12;
  width: 100%;
}

.div47 {
  grid-area: 5 / 12 / 6 / 14;
  width: 100%;
}

<div class="grid-container">
  <div class="grid-item div1"></div>
  <div class="grid-item div2"></div>
  <div class="grid-item div3"></div>
  <div class="grid-item div4"></div>
  <div class="grid-item div5"></div>
  <div class="grid-item div6"></div>
  <div class="grid-item div7"></div>
  <div class="grid-item div8"></div>
  <div class="grid-item div9"></div>
  <div class="grid-item div10"></div>
  <div class="grid-item div11"></div>
  <div class="grid-item div12"></div>
  <div class="grid-item div13"></div>
  <div class="grid-item div14"></div>
  <div class="grid-item div15"></div>
  <div class="grid-item div16"></div>
  <div class="grid-item div17"></div>
  <div class="grid-item div18"></div>
  <div class="grid-item div19"></div>
  <div class="grid-item div20"></div>
  <div class="grid-item div21"></div>
  <div class="grid-item div22"></div>
  <div class="grid-item div23"></div>
  <div class="grid-item div24"></div>
  <div class="grid-item div25"></div>
  <div class="grid-item div26"></div>
  <div class="grid-item div27"></div>
  <div class="grid-item div28"></div>
  <div class="grid-item div29"></div>
  <div class="grid-item div30"></div>
  <div class="grid-item div31"></div>
  <div class="grid-item div32"></div>
  <div class="grid-item div33"></div>
  <div class="grid-item div34"></div>
  <div class="grid-item div35"></div>
  <div class="grid-item div36"></div>
  <div class="grid-item div37"></div>
  <div class="grid-item div38"></div>
  <div class="grid-item div39"></div>
  <div class="grid-item div40"></div>
  <div class="grid-item div41"></div>
  <div class="grid-item div42"></div>
  <div class="grid-item div43"></div>
  <div class="grid-item div44"></div>
  <div class="grid-item div45"></div>
  <div class="grid-item div46"></div>
  <div class="grid-item div47"></div>
</div>

Some explanations:

I defined the div38, 1rst col, 2nd div under, it's to fix the others otherwise empty place. Just put it with opacity 0
I defined only what should be, leaving grid doing its job for the others

Thank you Pier, worked perfectly. The only edit I made was to target the specific div. I used div:nth-of-type(number) instead of adding other classes
good way, I did it this way for you to check exactly which div is where! But sure there are more compact way to do it.

Collectives™ on Stack Overflow

How to target specific elements for custom layout with CSS Grid?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related