Grid-Template-Areas, how to deal with items that don't belong to an area

HTML-CSS
1

Greetings!
I was trying to make a css style for a project, and i chose to use the CSS-Grid using grid-template-areas property, but the way i implemented it is a little bit too tedious and long here is how i did it:

.grid-container {
  height: 300px;
  width: 300px;
  background-color: rgba(255, 251, 0, 0.685);
  padding: .1rem;
  gap: 1px;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas: 
  "AC AC child2 child3"
  "child4 child5 child6 child7"
  "child8 child9 child10 child11"
  "child12 child13 child14 EQ"
  "ZERO ZERO child17 EQ";
}
.grid-child {
  background-color: darkslategray;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
}
.grid-child:nth-child(1){
  background-color: firebrick;
  grid-area: AC;
}
.grid-child:nth-child(2){
  grid-area: child2;
}
.grid-child:nth-child(3){
  grid-area: child3;
}
.grid-child:nth-child(4){
  grid-area: child4;
}
.grid-child:nth-child(5){
  grid-area: child5;
}
.grid-child:nth-child(6){
  grid-area: child6;
}
.grid-child:nth-child(7){
  grid-area: child7;
}
.grid-child:nth-child(8){
  grid-area: child8;
}
.grid-child:nth-child(9){
  grid-area: child9;
}
.grid-child:nth-child(10){
  grid-area: child10;
}
.grid-child:nth-child(11){
  grid-area: child11;
}
.grid-child:nth-child(12){
  grid-area: child12;
}
.grid-child:nth-child(13){
  grid-area: child13;
}
.grid-child:nth-child(14){
  grid-area: child14;
}
.grid-child:nth-child(15){
  grid-area: EQ;
  background-color: forestgreen;
}
.grid-child:nth-child(16){
  grid-area: ZERO;
  background-color: dodgerblue;
}
.grid-child:nth-child(17){
  grid-area: child17;
}

link for the pen: https://codepen.io/BedwardVedicci/pen/NWRoqXG

Is there a better alternative to this approach?

2

There’s no need to define the grid-areas for each element. The only elements that need some extra styling are the ones that take up more than one cell. If you give the first button grid-column:1/3, it’ll take up two cells, and the following <div>s will just be sorted into the grid in their order.

1 Like
3

Thanks mate for the tip :+1:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.