CSS -Gitter -Layout: Erstellen Sie ein leistungsstarkes und flexibles Website -Layout

Kernpunkte

• CSS -Gitterlayouts bieten eine leistungsst?rkere und flexiblere M?glichkeit, komplexe Website -Layouts zu erstellen, ohne Eigenschaften wie inline und float oder separate Stylesheets für Gittersysteme zu verwenden.
• Derzeit unterstützt nur dh 10 und Edge CSS -Gitterlayouts, kann jedoch über bestimmte Flags in Chrom und Firefox oder mit Polyfill aktiviert werden.
• CSS -Gitterlayouts verwenden Messeinheiten, Linien, Spuren, Zellen und Regionen, die als "FR" bezeichnet werden, um das Layout von Elementen auf einer Webseite zu definieren.
• CSS -Gitterlayout erm?glicht eine vollst?ndige Trennung von Markern und Layouts, wodurch CSS leichter gewartet werden kann und endlose M?glichkeiten für das Design bietet.

Gitter sind entscheidend, um komplexe Websites zu erstellen. Die Bedeutung von Gittern im modernen Webdesign ist aus der Anzahl der Frameworks zu sehen, die Gittersysteme implementieren, um die Entwicklung zu beschleunigen.

Mit der Einführung der CSS -Gitter -Layout -Spezifikation müssen Sie kein separates Stylesheet mehr einfügen, um das Netzsystem zu verwenden. Ein weiterer Vorteil ist, dass Sie sich nicht mehr auf Attribute wie inline und float verlassen müssen, um Elemente auf der Webseite zu arrangieren. In diesem Tutorial werden wir die Grundlagen von Grid -Systemen behandeln und ein grundlegendes Blog -Layout erstellen.

Browser -Unterstützung

Derzeit nur dh 10 und Edge -Support -Grid -Layouts - Sie k?nnen es noch nicht auf kommerziellen Websites verwenden.

kann es in Chrome über die "Experimental Web Platform -Funktionen" Flag in Chrome: // Flags aktiviert werden. Sie k?nnen es in Firefox mit der layout.css.grid.enabled -Flag aktivieren.

Eine andere Option ist die Verwendung von Polyfill. CSS Grid Polyfill existiert! Mit den verschiedenen oben genannten Optionen k?nnen Sie mit dem Gitterlayout experimentieren und so viel wie m?glich lernen, wenn es noch in den Kinderschuhen steckt.

Hinweis: Der Internet -Explorer implementiert derzeit die Spezifikationen für ?ltere Versionen. Leider bedeutet dies, dass es nicht vollst?ndig mit den neuesten Spezifikationen kompatibel ist. Bei der Untersuchung der Beispiele in diesem Tutorial wird empfohlen, Chrome oder Firefox mit aktiviertem Flag zu verwenden.

Grid -System -Terminologie

In Bezug auf die Auslegung von Elementen ?hnelt das CSS -Gittersystem einer Tabelle. Es ist jedoch leistungsst?rker und flexibler. In diesem Abschnitt werde ich einige Begriffe besprechen, die sich bei der Verwendung eines Gitters bewusst sein müssen:

fr Einheit: Dieses Ger?t wird verwendet, um einen Teil des verfügbaren Raums anzugeben. Es ist so konzipiert, dass es mit grid-rows und grid-columns verwendet werden soll. Nach der Spezifikation -

Zuweisung des Fraktionsraums erfolgt schlie?lich "L?nge" oder inhaltsbasierte Zeile und Spaltengr??en erreichen ihr Maximum.

Linie: Linien definieren die Grenzen anderer Elemente. Sie laufen vertikal und horizontal. In der folgenden Abbildung gibt es vier vertikale Linien und vier horizontale Linien.

Stra?e: Die Strecke ist der Raum zwischen parallelen Linien. In der folgenden Abbildung gibt es drei vertikale Spuren und drei horizontale Spuren.

Zelle: Zellen sind die grundlegenden Bausteine ??des Netzes. In der folgenden Abbildung gibt es insgesamt neun Zellen.

Bereich: Der Bereich ist eine rechteckige Form mit einer beliebigen Anzahl von Zellen. Daher ist der Track ein Bereich und die -Zelle ist auch ein Bereich .

Positionselemente im Raster

Beginnen wir mit den Grundlagen. In diesem Abschnitt werde ich Ihnen beibringen, wie Sie ein Netz verwenden, um Elemente an bestimmten Orten zu lokalisieren. Um das CSS -Gitterlayout zu verwenden, ben?tigen Sie ein übergeordnetes Element und ein oder mehrere Kinder. Zur Demonstration verwenden wir das folgende Tag als unser Grid -System:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Nach Abschluss des Tags müssen Sie display: grid oder display: inline-grid auf das übergeordnete Element anwenden, wie unten gezeigt:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

Die Eigenschaften

grid-template-columns und grid-template-rows werden verwendet, um die Breite verschiedener Zeilen und Spalten anzugeben. Im obigen Beispiel habe ich fünf Spalten definiert. Die Spalte 10px fungiert als Slots, um den erforderlichen Abstand zwischen den Elementen bereitzustellen. Die erste Spalte hat eine Breite von 200px. Die dritte Spalte nimmt Teil 0,3 des verbleibenden Raums ein. In ?hnlicher Weise nimmt die fünfte Spalte den 0,7 -Teil des verbleibenden Raums ein.

Verwenden Sie grid-template-rows für die erste Zeile in auto, damit die Zeile basierend auf ihrem internen Inhalt erweitert wird. 20px Die Zeile fungiert als Slot.

Zu diesem Zeitpunkt sind die Elemente eng angeordnet, wie in der folgenden Demonstration gezeigt. (Der Codepen -Demo -Link wird hier weggelassen)

Beachten Sie, dass sich Element B in der zweiten Spalte befindet, die wir als Steckplatz verwenden m?chten. Wenn Sie den Ort von untergeordneten Elementen innerhalb des Netzes nicht angeben, platziert der Browser ein Element in jede Zelle, bis die erste Zeile vollst?ndig gefüllt ist und der Rest dann zur n?chsten Zeile geht. Aus diesem Grund haben wir noch vier Ersatzspalten in der zweiten Reihe.

Um Elemente in bestimmte Zellen im Netz zu verschieben, müssen Sie ihren Standort in CSS angeben. Bevor Sie erl?utern, wie Elemente mit einem Gittersystem verschoben werden, lesen Sie das Bild unten. (Der Bildlink ist hier weggelassen)

In diesem Fall werden wir "Linienbasierte Platzierung" verwenden. Linienbasierte Platzierung bedeutet, dass Linien in unserem Netzsystem als Leitfaden für die Platzierung und Begrenzung von Elementen dienen. Nehmen wir Element B als Beispiel. In der horizontalen Richtung beginnt es von Spalte 3 und endet von Spalte 4. Auf der vertikalen Achse befindet es sich zwischen Linie 1 und Zeile 2.

Wir verwenden grid-column-start, um die vertikale Startlinie des Elements anzugeben. In diesem Fall wird es auf 3 gesetzt. grid-column-end zeigt die vertikale Endlinie des Elements an. In diesem Fall wird diese Eigenschaft 4 entsprechen. Die entsprechenden Zeilenwerte werden ?hnlich festgelegt.

Betrachtet man alle oben genannten, um Element B in die zweite Zelle zu bewegen, verwenden Sie das folgende CSS:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Um Element F in die sechste Zelle zu bewegen, verwenden Sie das folgende CSS:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

Nachdem diese ?nderungen an CSS vorgenommen wurden, sollten die Elemente wie in dieser Demo korrekt verteilt sein. (Der Codepen -Demo -Link wird hier weggelassen)

Erstellen Sie ein grundlegendes Layout

Es ist Zeit, ein grundlegendes Blog -Layout zu erstellen. Der Blog verfügt über eine Header, eine Fu?zeile, eine Seitenleiste und zwei Abschnitte für tats?chliche Inhalte. Beginnen wir mit dem Marker:

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

Denken Sie daran, dass die Reihenfolge der Elemente in den Tags die Position von Elementen auf der Webseite nicht beeinflusst. Solange Sie das CSS nicht ?ndern, k?nnen Sie die Fu?zeile über den Header im Tag platzieren, und die Position der Elemente auf der Webseite ?ndert sich nicht. Natürlich empfehle ich das nicht. Der Punkt ist - Ihr Marker bestimmt nicht mehr die Position des Elements.

Was wir jetzt tun müssen, ist, die Werte der grid-row-end und anderer Attribute verschiedener Elemente zu bestimmen. Genau wie im letzten Beispiel werden wir das Gitterdiagramm verwenden, um die Werte aller Gittereigenschaften zu bestimmen. (Der Bildlink ist hier weggelassen)

Wie in der obigen Abbildung gezeigt, verl?uft der Header von Spalte 1 zu Spalte 4 und von Zeile 1 bis Zeile 2. Dies sollte so aussehen:

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

In ?hnlicher Weise geht "extra" von Spalte 3 bis Spalte 4 und von Zeile 5 bis Zeile 6. Das CSS w?re also:

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

Die Gittereigenschaften aller anderen Elemente k?nnen jetzt leicht bestimmt werden. Schauen Sie sich die Codepen-Demonstration an und experimentieren Sie mit verschiedenen Gitterwerten, um die leitungsbasierte Platzierung besser zu verstehen. (Der Codepen -Demo -Link wird hier weggelassen)

Schlussfolgerung

Mit

CSS -Gitterlayoutspezifikationen k?nnen wir problemlos komplexe Layouts erstellen. Das CSS, das wir schreiben müssen, ist einfacher und leichter zu warten. Beim Erstellen komplexer Layouts im Design müssen wir nicht mehr float oder andere solche Attribute verwenden. Ein weiterer gro?er Vorteil ist die vollst?ndige Trennung von Markierung und Layout. Bei CSS -Gitterlayout sind die M?glichkeiten endlos.

Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich bitte in den Kommentaren wissen.

FAQs über CSS -Gitterlayout

Wie unterscheidet sich das CSS -Gitterlayout von anderen CSS -Layoutmethoden?

CSS-Gitterlayout ist ein zweidimensionales Layoutsystem, das sich von anderen CSS-Layoutmethoden wie Flexbox unterscheidet, die eindimensional ist. Dies bedeutet, dass Sie mit CSS -Netz sowohl horizontale als auch vertikale Layouts steuern k?nnen, die andere Methoden nicht ausführen k?nnen. Es ist für komplexere Designs und gro?e Layouts ausgelegt. Es ist auch flexibler und leistungsf?higer und erm?glicht kreatives und feineren Design.

Wie kann man mit CSS -Gitterlayouts beginnen?

Um das CSS -Gitterlayout zu verwenden, müssen Sie das display -Merkmal des Elements auf grid oder inline-grid festlegen. Dies macht das Element zu einem Gitterbeh?lter und seinen untergeordneten Elementen zu einem Rasterelement. Sie k?nnen dann verschiedene Mesh -Eigenschaften verwenden, um das Layout des Netzes und die Position der Netzelemente zu definieren.

Kann ich CSS -Gitterlayout mit anderen CSS -Layout -Methoden verwenden?

Ja, CSS -Gitterlayouts k?nnen in Verbindung mit anderen CSS -Layout -Methoden verwendet werden. Beispielsweise k?nnen Sie Flexbox für Komponenten Ihrer Website und Ihres CSS -Netzes für das Gesamtlayout verwenden. Auf diese Weise k?nnen Sie jeden Layout -Ansatz nutzen.

Wie erstelle ich ein Gitter mit CSS -Netzlayout?

Um ein Gitter mit einem CSS -Gitterlayout zu erstellen, müssen Sie zun?chst den Gitterbeh?lter definieren, indem Sie das Attribut des Elements auf display oder grid einstellen. Sie k?nnen dann die Eigenschaften inline-grid und grid-template-columns verwenden, um die Anzahl und Gr??e von Spalten und Zeilen im Raster zu definieren. grid-template-rows

Wie kann man einen Gegenstand in ein Netz platzieren?

Sie k?nnen die Eigenschaften

und grid-column verwenden, um Elemente in das Netz zu platzieren. Mit diesen Eigenschaften k?nnen Sie die Start- und Endlinien des Projekts angeben und sie effektiv in eine bestimmte Zelle oder Zelle des Netzes platzieren. grid-row

Was sind Gitterlinien und Gitterspuren?

In CSS -Gitterlayout sind Gitterlinien Teiler, die die Gitterstruktur ausmachen. Ihre Zahlen beginnen bei 1 und die Liniennummern werden von oben nach unten und von links nach rechts erh?ht. Eine Gitterspur ist der Raum zwischen zwei benachbarten Gitterlinien, die eine Spalte oder eine Zeile sein k?nnen.

Was ist die

Einheit im CSS -Gitterlayout? fr

Die Einheit

im CSS -Gitterlayout repr?sentiert "Score". Es repr?sentiert einen Teil des verfügbaren Raums im Rasterbeh?lter. Wenn Sie beispielsweise ein Raster mit drei Spalten haben und die Breite einer Spalte auf fr und die beiden anderen Spalten auf 1fr einstellen, wird die erste Spalte ein Drittel des verfügbaren Raums und die andere die beiden eingesetzt S?ulen belegen jeweils ein Drittel. 2fr

Wie kann das Netz reaktionsschnell?

Um das Netz reaktionsschnell zu machen, k?nnen Sie Medienabfragen mit

und grid-template-columns Eigenschaften verwenden. Sie k?nnen auch die Schlüsselw?rter grid-template-rows und auto-fill mit den auto-fit -Funktionen verwenden, um die Anzahl und Gr??e der Spalten und Zeilen automatisch gem?? der Gr??e des Ansichtsfensters anzupassen. repeat

Kann ich mein Raster in meinem Netz nisten?

Ja, Sie k?nnen Gitter in einem CSS -Gitterlayout nisten. Dies bedeutet, dass Sie das Netzprojekt selbst zu einem Gitterbeh?lter machen k?nnen und komplexe verschachtelte Layouts erzeugen.

Werden CSS -Gitterlayouts von allen Browsern unterstützt?

Alle modernen Browser (einschlie?lich Chrome, Firefox, Safari und Edge) unterstützen CSS -Gitterlayouts. Internet Explorer unterstützt es jedoch nicht. Daher ist es wichtig, Benutzern, die nicht unterstützte Browser verwenden, alternative Layouts bereitzustellen.

Bitte beachten Sie, dass ich die Bilder nicht direkt anzeigen kann, da ich nicht auf externe Websites und Bilder zugreifen kann. Bitte stellen Sie sicher, dass der Bildlink zu Ihrer endgültigen Ausgabe korrekt hinzugefügt wird.

Das obige ist der detaillierte Inhalt vonEinführung des CSS -Gitterlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!