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

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);
  "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;
  background-color: firebrick;
  grid-area: AC;
  grid-area: child2;
  grid-area: child3;
  grid-area: child4;
  grid-area: child5;
  grid-area: child6;
  grid-area: child7;
  grid-area: child8;
  grid-area: child9;
  grid-area: child10;
  grid-area: child11;
  grid-area: child12;
  grid-area: child13;
  grid-area: child14;
  grid-area: EQ;
  background-color: forestgreen;
  grid-area: ZERO;
  background-color: dodgerblue;
  grid-area: child17;

link for the pen:

Is there a better alternative to this approach?

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

Thanks mate for the tip :+1: