Ist CSS Grid die ultimative Lösung für komplexe Layouts?

Rasterlayout: Eine moderne Lösung für komplexe Layouts

Ihre Suche nach einer Lösung, die sowohl Zeilen als auch Spalten in einer Nicht-Tabelle umfasst, Das Nicht-Raster-Layout wurde in früheren Threads ausführlich dokumentiert. Allerdings hat sich die Situation mit den letzten Browser-Updates verändert.

CSS Grid: Ein Game-Changer

CSS Grid Layout wird jetzt von allen gängigen Browsern vollständig unterstützt und bietet eine robuste und flexible Lösung für komplexe Layouts. Es entfällt die Notwendigkeit, HTML zu ändern, verschachtelte Container hinzuzufügen oder feste Containerhöhen festzulegen.

Rasterlayout implementieren

1. Legen Sie die Anzeigeeigenschaft des Wrapper-Elements fest zum Raster, um das Rasterlayout zu aktivieren.
2. Definieren Sie die Rasterspalten und -zeilen mit „grid-template-columns“ und „grid-auto-rows“.
3. Legen Sie die Eigenschaft „grid-gap“ fest, um den Abstand dazwischen anzugeben Elemente.
4. Verwenden Sie Rasterzeilen- und Rasterspalteneigenschaften für Elemente, um deren Positionierung innerhalb des Rasters zu steuern.

Beispiel mit Rasterlayout

Bedenken Sie das folgende Code-Snippet, das CSS Grid enthält:

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

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

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

.block {
  background-color: red;
}

Verbesserte Browserunterstützung

Ab heute wird CSS Grid vollständig unterstützt von:

• Chrome 57
• Firefox 52
• Safari 10
• Edge 15
• Opera 44

Dies bedeutet, dass Sie CSS Grid jetzt sicher verwenden können, um komplexe Layouts zu erstellen, ohne Angst vor Browserkompatibilitätsproblemen haben zu müssen.

Das obige ist der detaillierte Inhalt vonIst CSS Grid die ultimative Lösung für komplexe Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!