Wie kann man ein Div über mehrere Zeilen und Spalten in einem Raster verteilen, ohne Raster- oder Tabellenlayouts zu verwenden?

Wie kann ich mithilfe von Nicht-Grid-Techniken eine Div über mehrere Zeilen und Spalten in einem Raster erstellen?

Obwohl ich zuvor nach Lösungen dafür gesucht habe Da sich die Datei über mehrere Zeilen erstreckt, besteht die Herausforderung nun darin, sowohl Zeilen als auch Spalten zu überspannen. Um dies zu erreichen, ohne die Layouts Raster oder Tabelle zu verwenden, sollten Sie die folgenden Ansätze in Betracht ziehen:

Browserunterstützung für CSS Grid

Seitdem diese Frage aufgeworfen wurde, haben die wichtigsten Browser Versionen mit vollständiger Unterstützung für CSS Grid Layout veröffentlicht. Dieser vereinfachte Layout-Ansatz macht HTML-Änderungen, verschachtelte Container oder Korrekturen der Containerhöhe überflüssig.

CSS Grid-Implementierung

Hier ist eine Beispielimplementierung mit CSS Grid :

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

.tall {
    grid-row: 1 / 3;                          /* 5 */
    grid-column: 2 / 3;                       /* 5 */
}

.wide {
    grid-row: 2 / 4;                          /* 6 */
    grid-column: 3 / 5;                       /* 6 */
}

.block {
    background-color: red;
}</code>

Der obige Code verwendet ein CSS-Raster mit gleich großen Spalten und automatisch dimensionierten Zeilen. Die .tall-Klasse erstreckt sich über zwei Zeilen (1 und 2) und die .wide-Klasse über zwei Spalten (3 und 4), wie durch die Eigenschaften „grid-row“ und „grid-column“ angegeben. Die Grid-Gap-Eigenschaft fügt Abstand zwischen Elementen hinzu.

Das obige ist der detaillierte Inhalt vonWie kann man ein Div über mehrere Zeilen und Spalten in einem Raster verteilen, ohne Raster- oder Tabellenlayouts zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!