Wie überspanne ich Zeilen und Spalten mit einem CSS-Raster?

Zeilen- und spaltenübergreifende Divs in einem Raster

Aufbauend auf dem Problem der vertikalen Erweiterung von Divs in einem Raster untersuchen wir nun eine komplexere Herausforderung: gleichzeitiges Überspannen von Zeilen und Spalten. Wie können wir in einer Reihe mit fünf Elementen strategisch größere Elemente in der Mitte positionieren?

Nichtideale Ansätze

Das seitliche Verschieben des Elements ist ein inhärentes Ergebnis des Verhaltens der Float-Eigenschaft. Darüber hinaus sind weder HTML-Tabellen noch CSS-Grid-Layout hier praktikable Lösungen.

Browserkompatibilität

CSS Grid bietet eine nahtlose Lösung, aber die Browserunterstützung war in der Vergangenheit begrenzt. Durch aktuelle Updates der wichtigsten Browser ist Grid Layout jedoch vollständig verfügbar.

CSS Grid Solution

Grid Layout bietet eine elegante Lösung. Ohne den HTML-Code zu ändern, verschachtelte Container zu ändern oder feste Höhen festzulegen:

<code class="css">#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  width: 516px;
}</code>

Um bestimmte Zeilen und Spalten zu überspannen:

<code class="css">.tall {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

.wide {
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}</code>

Durch die Definition der Start- und Endzeilen und -spalten können wir dies tun Steuern Sie die Größe und Position der Divs im Raster präzise und erzielen Sie so das gewünschte Layout.

Das obige ist der detaillierte Inhalt vonWie überspanne ich Zeilen und Spalten mit einem CSS-Raster?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!