Benutzerdefiniertes Layout mit CSS Grid: Ausrichtung auf bestimmte Elemente

Question

Ich muss dieses Design mit CSS Grid reproduzieren und habe versucht, bestimmte Rasterelemente zu positionieren, um das Ergebnis zu erhalten, aber ohne Erfolg.

Das ist es, was ich derzeit habe. Ich muss ein paar Dinge reparieren, aber vorher möchte ich die Struktur in Ordnung bringen.

Angehängter Codeausschnitt:

.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>

Ich habe erfolglos versucht, mit grid-template-rows das Layout zu ändern. Irgendwelche Vorschläge?

Answer 1

.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%;
}