Einführung des CSS -Gitterlayouts

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.

Bilder stammen von sitepoint/natalia balska.

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!