国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Benutzerdefiniertes Layout mit CSS Grid: Ausrichtung auf bestimmte Elemente
P粉144705065
P粉144705065 2024-03-28 11:25:39
0
1
427

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?

P粉144705065
P粉144705065

Antworte allen(1)
P粉463418483 

.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%;
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage