CSS grid layout

CSS -Gitter
CSS Grid Layout Modul Level 1
CSS Floated Layout.png
Eine Darstellung eines typischen Webseitenlayouts mit Verwendung CSS schwimmt.
Abkürzung Raster, Netzlayout
Einheimischer Name
CSS Grid Layout Modul Level 1
Status W3C -Kandidatenempfehlungentwurf
Erstmals veröffentlicht 7. April 2007[1]
Letzte Version Level 1
18. Dezember 2020[2]
Vorschau -Version Level 2
11. März 2021[3]
Organisation W3c
Komitee CSS -Arbeitsgruppe
Redakteure
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
  • Oriol Brufau
  • Alex Mogilevsky
  • Phil Cupp
  • Markus Mielke[4][5]
[3]
Grundstandards CSS
Domain CSS
Webseite www.W3.org/Tr/CSS-Grid-1/

Im Cascading Style Sheets, CSS Grid Layout oder CSS -Gitter erstellt komplex sich anpassendes Webdesign Netz Layouts leichter und konsequent über Browser.[6] Historisch gesehen gab es andere Methoden zur Kontrolle von Webseiten -Layoutmethoden wie z. Tische, schwimmtund in jüngerer Zeit, CSS Flexible Box -Layout (Flexbox). CSS Grid ist derzeit kein offizieller Standard (es ist a W3C -Kandidatenempfehlung) Obwohl es von den jüngsten Versionen aller aktuellen Hauptbrowser übernommen wurde.[7]

Motivation

CSS -Netz kann robustere und flexiblere Layouts erzeugen als die vorherigen Optionen wie CSS schwimmt. Außerdem ermöglicht es standardisierterer Code, der in den Browsern funktioniert. Dies steht im Gegensatz zu bestimmten Browser -Hacks oder komplizierten Problemumgehungen.[2]

Ein Problem mit der Ausnutzung von Floats in CSS ist, dass, wenn der Inhalt zu einem Teil der Seite hinzugefügt wird, den Fluss der Seite stören und das Layout brechen kann. Dies ist auf die unterschiedlichen Höhen für Layoutelemente zurückzuführen.[2] Obwohl Flexbox flexible Layouts unterstützt und die Flexibilität des Erstellens komplexer Layouts bietet, fällt es nicht, wenn die Erstellung von reaktionsschnellen Layouts im zweidimensionalen Raum erstellt werden muss.

Geschichte

Der erste umfassende Entwurf eines Gitterlayouts für CSS wurde von Phil Cupp bei erstellt Microsoft im Jahr 2011 und implementiert in Internet Explorer 10 hinter einem -Frau- Anbieter Präfix. Die Syntax wurde umstrukturiert und durch mehrere Interationen in der weiter verfeinert CSS -Arbeitsgruppe, führt hauptsächlich von Elika Etemad und Tab Atkins Jr. Web-Entwickler nach Evangelisation in erster Linie von Rachel Andrew und Jen Simmons.[8]

Browserunterstützung

Ab Oktober 2017 unterstützen Chrome, Firefox, Safari und Edge alle CSS -Gitter ohne Anbieter -Präfixe.[9][10][11] IE 10 und 11 unterstützen CSS -Netz, jedoch mit einer veralteten Spezifikation. Auf Mobiltelefon unterstützen alle modernen Browser CSS -Netz mit Ausnahme des Opern -Mini- und Baidu -Browsers.[12] Webentwickler, die auf ältere Browser abzielen, können nutzen Modernizr 3.5.0, um die Webseite nach Bedarf zu erkennen und anmutig zu beeinträchtigen.[13]

Nutzung in Frameworks

Rückenwind -CSS beinhaltet CSS -Gitter in seine Dienstprogramme, um die Größe von Elementen zu kontrollieren und platziert zu werden.[14] Viele andere aktuelle Web -Frameworks enthalten jedoch kein CSS -Netz, wie z. Bootstrap 4 und Stiftung 6.[15]

die Fr -Einheit

Die "FR" -Einheit wird häufig mit CSS -Gitterlayout verwendet.[16][17][18] Die "FR" -Einheit, Teil der CSS -Gitter -Layout -Spezifikation, repräsentiert einen Bruchteil des übrig gebliebenen Raums im Gitterbehälter.[2]

Beispiele

Layout "Holy Grail"

Das Folgende ist ein Beispiel für das Layout "Holy Grail":

Html Ausgabe 
<html> <Stil> div { Grenze: 1px fest; } Karosserie {  Anzeige: Netz;  Grid-Template-Säulen: 10em Auto 10em;  Grid-Template-Areas:   "Header Header Header"  "linke mittlere rechte" "  "Fußzeile Fußzeile Fußzeile"; } Stil> <Karosserie>  <div Stil="Gitterbereich: Header">Der Kopfballdiv>  <div Stil="Gitterbereich: Fußzeile">Die Fußzeilediv>  <div Stil="Gitterbereich: links">Das linke Felddiv>  <div Stil="Gitterbereich: Mitte; Höhe: 200px">Der Hauptinhaltsbereichdiv>  <div Stil="Gitterbereich: Richtig">Das rechte Felddiv> Karosserie> html>
CSS Grid Holy Grail Layout

Wertetabelle

Das Folgende ist ein Beispiel für eine Werte Tabelle:

Html Ausgabe 
<html> <Stil> .Verpackung {  Anzeige: Netz;  Grid-Template-Säulen: 1fr 1fr 1fr;  Gitterlack: 0,5em; } div {   Grenze: 1px fest;  } Stil> <Karosserie>  <div Klasse="Verpackung">  <H3>Header1H3> <H3>Header2H3> <H3>Header3H3>  <div>Wert 11div> <div>Wert12div> <div>Wert13div>  <div>Wert21div> <div>Wert 22div> <div>Wert23div>  <div>Wert31div> <div>Wert32div> <div>Wert33div>  <div>Wert 41div> <div>Wert 42div> <div>Wert 43div>  <div>Wert 51div> <div>Wert 52div> <div>Wert 53div>  <div>Wert61div> <div>Wert62div> <div>Wert63div>  <div>Wert 71div> <div>Wert 72div> <div>Wert 73div>  div> Karosserie> html>
A simple implementation of the CSS Grid layout demonstrating a table layout

Verweise

  1. ^ "CSS Grid Layout Modul Level 1 Publication History - W3C". W3c. n.d. Abgerufen 2021-04-09.
  2. ^ a b c d Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, Hrsg. (2021-12-18). "CSS Grid Layout Modul Level 1". W3c. W3C Arbeitsgruppe. Abgerufen 2021-04-09.
  3. ^ a b Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, Hrsg. (2021-03-11). "CSS Grid Layout Modul Level 2". W3c. CSS -Arbeitsgruppe. Abgerufen 2021-04-09.
  4. ^ Mogilevsky, Alex; Cupp, Phil; Mielke, Markus; Glazman, Daniel, Hrsg. (2011-04-07). "Gitterstruktur". W3c. CSS -Arbeitsgruppe. Abgerufen 2021-04-09.
  5. ^ Mogilevsky, Alex; Mielke, Markus, Hrsg. (2007-09-05). "CSS -Gitterpositionierungsmodul Level 3". W3c. CSS -Arbeitsgruppe. Abgerufen 2021-04-09.
  6. ^ "CSS Grid - Tischlayout ist zurück. Sei da und quadratisch". Google -Entwickler. Januar 2017. Abgerufen 2021-04-09.
  7. ^ "CSS Grid Layout (Stufe 1) | Kann ich ... Support -Tabellen für HTML5, CSS3 usw. verwenden?". caniuse.com. Abgerufen 2022-01-12.
  8. ^ Gustafson, Aaron (2017-10-19). "Die Geschichte des CSS -Netzes, von seinen Schöpfer". Eine Liste auseinander. Abgerufen 2022-01-12.
  9. ^ Anderson, Kareem (13. September 2017). "Der neueste Browser von Microsoft erhöht mit EdgeHtml 16 einen erheblichen Schub". Abgerufen 7. Oktober 2017.
  10. ^ Protalinski, Emil (9. März 2017). "Chrome 57 kommt mit CSS Grid Layout und API -Verbesserungen | VentureBeat an". VentureBeat. Abgerufen 7. Oktober 2017.
  11. ^ "CSS Grid Layout". Kann ich benutzen. n.d. Abgerufen 2021-04-09.
  12. ^ ""Gitter" | Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden? ".
  13. ^ Ateş, Faruk (2017-04-13). "Modernizr 3.5.0". Modernizr News. Abgerufen 2021-04-09.
  14. ^ "Gittersäule Start / Ende - Rückenwind -CSS". Abgerufen 2021-04-13.
  15. ^ Goetter, Raphael (2017-02-16). "Flexbox -Gitter und Frameworks". Github Gist. Archiviert von das Original Am 2017-02-16. Abgerufen 2021-04-09.
  16. ^ Alligator.io (2020-09-03). "CSS Grid Layout: Die FR -Einheit". Digitalocean. Digitalocean. Abgerufen 2021-04-09.
  17. ^ Marcotte, Ethan (2018-07-18). "Fractional. - Ethan Marcotte". Ethan Marcotte. Abgerufen 2021-04-09.
  18. ^ Rendle, Robin (2017-06-12). "Eine Einführung in die 'FR' CSS -Einheit". CSS-Tricks. Abgerufen 2021-04-09.

Externe Links