Ein Anfänger -Leitfaden zum CSS -Rasterlayout

Das CSS -Gitter -Layout -Modul hat die Art und Weise, wie Websites erstellt werden, revolutioniert. Es bietet Tools, die erweiterte Layouts ohne die kniffligen Hacks und erfinderischen Lösungen der Vergangenheit ermöglichen.

In dieser Einführung in das Netz gehen wir durch die Grundlagen, wie das Netzlayout funktioniert, und wir werden viele einfache Beispiele für die Verwendung in der Praxis ansehen.

Key Takeaways

1. Einführung in das CSS -Gitterlayout: Der Artikel bietet ein grundlegendes Verständnis des CSS -Rasters als leistungsstarkes Layout -System in CSS und erklärt, wie Elemente in ein Gittergerüst von Zeilen und Spalten für die Platzierung strukturierter Inhalte umgewandelt werden können. Es deckt die Grundlagen, ein Element in einen Rastercontainer und seine direkten Kinder in Netzelemente zu verwandeln.

   .

2. Gitterstruktur und Elementplatzierung: Es werden wesentliche Merkmale des CSS-Gitters untersucht, einschließlich der Definition von Gitterstrukturen unter Verwendung von Eigenschaften wie Gitter-Template-Säulen, Raster-Template-Reihen und Gitter-Template-Areas. Das Tutorial zeigt Abstandsnetzelemente mit der Gap -Eigenschaft und organisiert sie in bestimmten Zeilen und Spalten für ein präzises Layout.

3. Responsive Design mit CSS -Raster: Die Anpassungsfähigkeit von CSS -Gitter für reaktionsschnelles Webdesign wird hervorgehoben und zeigt, wie Medienabfragen zum Ändern von Gitterlayouts für verschiedene Bildschirmgrößen verwendet werden können. Erweiterte Techniken wie überlappende Gitterelemente und das Erstellen von Reaktionslayouts ohne Medienabfragen werden ebenfalls diskutiert, wobei die Vielseitigkeit des CSS -Gitters im modernen Webdesign betont wird.

Erste Schritte mit Grid Layout

Ein Raster ist ein Rahmen von Spalten und Zeilen, in die wir Inhalte platzieren können. (Es ist ein bisschen wie ein Tischlayout, aber bei Steroiden!)

Einstieg mit dem Gitter ist so einfach wie dies:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Jetzt werden alle direkten Kinder des .container -Elements „Grid -Elemente“ sein. Zunächst werden sie einfach als eine Reihe von Zeilen in einer einzigen Spalte angezeigt, wie in der Demo unten gezeigt.

Siehe die Grundlagen des Stifts
cs

Im obigen Beispiel haben wir ein

-Element, das als Container fungiert. Im Inneren haben wir mehrere Elemente, die jetzt Grid -Elemente sind:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Bisher haben wir nicht viel erreicht, da wir ohne Anzeige das gleiche Ergebnis erzielen würden: Grid.

Weiteres Lesen:

In der obigen Demo befindet sich der Behälter im Ansichtsfenster. Lesen Sie mehr über die Zentrierung von Elementen mit Gitter.

Einstellen einer Lücke zwischen Gitterartikeln

Lassen Sie uns zuerst unsere Divs ein wenig mit der Gap -Eigenschaft voneinander auseinander lassen:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Siehe die Grundlagen des Stifts
cs

Die Gap -Eigenschaft fügt Platz zwischen den Elementen vertikal und horizontal ein, wie wir in Kürze sehen werden. (Wir können unterschiedliche horizontale und vertikale Lücken festlegen, wenn wir müssen.)

Weiteres Lesen:

Lesen Sie mehr über die Gap -Eigenschaft.

Grid -Spalten einrichten

Derzeit haben wir ein „implizites“ Netz - was bedeutet, dass der Browser nur ein Raster für sich selbst herausfindet, da wir noch keine Zeilen oder Spalten angegeben haben. Standardmäßig erhalten wir nur eine Spalte und vier Zeilen - eine für jedes Netzelement. Lassen Sie uns nun einige Spalten angeben:

Mit Raster-Template-Säulen geben wir an, dass wir jeweils vier Spalten mit einer Breite von 1FR oder einem Bruchteil des verfügbaren Raums wünschen. (Anstelle von 1fr 1fr 1fr 1FR konnten wir Repeat (4, 1FR) unter Verwendung der sehr praktischen Repeat () -Funktion schreiben.)

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Jetzt sind unsere Gitterartikel in einer Zeile ausgelegt, wie unten gezeigt.

Siehe Stift

CSS Grid Basics: Grid-Template-Säulen von SitePoint (@sinepoint)

auf CodePen.

Weiteres Lesen:

Weitere Informationen zu Raster-Template-Säulen.

• Erfahren Sie mehr über die Einheit Flexible Länge (FR).
• So verwenden Sie Grid's Repect () -Funktion.
organisieren Gitterelemente in Zeilen und Spalten

Lassen Sie uns nun unsere Rasterelemente in Zeilen und Spalten organisieren, da wir sie möglicherweise in einem Standard -Webseitenlayout sehen.

Erstens geben wir drei Zeilen mit der Eigenschaft der Gitter-Template-Reihen an:

Wenn wir diese Zeile dem obigen Stift hinzufügen, wird noch nicht viel passieren, da wir nicht angegeben haben, wie wir möchten, dass unsere Rasterelemente in diese Zeilen und Spalten passen. (Beachten Sie erneut, dass automatisch Auto automatisch als Wiederholung (3, automatisch) mit der Funktion repep () geschrieben werden kann.)

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Weiteres Lesen:

Weitere Informationen zu Raster-Template-Reihen.

• So verwenden Sie Grid's Repect () -Funktion.
Gitterelemente auf das Netz

platzieren

Die Entwicklerwerkzeuge unseres Browsers sind sehr praktisch, um das CSS -Netzlayout zu verstehen. Wenn wir unseren bisherigen Code inspizieren, können wir die horizontalen und vertikalen Netzlinien sehen, die unser Gitter definieren, wie unten abgebildet.

Es gibt fünf vertikale Gitterlinien und vier horizontale Gitterlinien, die alle nummeriert sind. Wir können diese Netzleitungen verwenden, um anzugeben, wie wir unsere Netzelemente verlegen sollen.

Stellen wir zuerst das

Element auf die vier Spalten und eine Zeile ein:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Dies gibt an, dass die

an der Spaltenzeile mit der Nummerierung von 1 und an der nummerierten Spaltenzeile endet. Da eine Endlinie nicht angegeben ist, erstreckt sie sich nur in die nächste Zeilenlinie, so

Lassen Sie uns etwas Ähnliches wie die :

tun

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Der einzige Unterschied besteht darin, dass wir die zwischen den Rasterreihenlinien 3 und 4.

festgelegt haben

lasst uns nun die und

-Elemente positionieren:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Das Ergebnis ist im Stift unten dargestellt.

Siehe die Grundlagen des Stifts

cs

Wir haben jetzt ein flexibles und reaktionsschnelles Layout ohne hackige Schwimmer, Überläufe und andere Albträume der Vergangenheit. Wenn wir unseren Gitterartikeln Inhalte hinzufügen, erweitern sie, um diesen Inhalt zu enthalten, und die Side-by-Side-Spalten haben immer die gleiche Höhe. (Für diejenigen, die mit CSS in den Noughties arbeiten, war es ein Albtraum, Säulen mit gleichem hohen Säulen zu erreichen!)

nützliche Dinge, die Sie über nummerierte Gitterlinien wissen können

Wenn Sie das obige Bild erneut ansehen, werden Sie feststellen, dass die vertikalen Linien am unteren Rand auch mit negativen Zahlen genannt werden. Jede Gitterlinie hat eine positive und negative Zahl. Dies hat viele Verwendungszwecke, beispielsweise wenn es viele Gitterlinien gibt und wir nicht unbedingt wissen, wie viele es geben wird. Wir könnten unser

Element so einstellen

Grid hat auch ein Spannwechsel, mit dem wir ein Element anweisen können, eine Anzahl von Zeilen oder Spalten zu überspannen. Eine weitere Option für unser

-Layout wäre das Schreiben von Grid-Säulen: 1 / Span 4. Dies fordert das Element an, an der ersten Rasterlinie zu beginnen und über alle unsere vier Spalten zu spannen.

Probieren Sie diese Variationen im obigen Stift aus.

Weiteres Lesen:

• Erfahren Sie mehr über Gitterlinien.
• Die Richtung, in der Gitterlinien nummeriert sind, wird durch den Schreibmodus unseres Layouts beeinflusst.
• Erfahren Sie mehr über die Gittersäule.
• Lesen Sie das Schlüsselwort des Span in der Netzspezifikation.

Gitterelemente mit den benannten Grid -Linien

platzieren

Wir haben gesehen, wie Elemente im Netz mit nummerierten Rasterleitungen organisiert werden. Wir können aber auch einige oder alle unsere Gitterlinien Namen geben und stattdessen auf diese verweisen - was etwas intuitiver sein kann und uns vor dem Zählen von Gitterlinien retten kann.

Aktualisieren wir unser Layout, um einige benannte Zeilen einzuschließen:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Im obigen Code haben wir nur drei vertikale Netzzeilen benannt. Die Namen gehen in quadratischen Klammern neben unseren Spaltenbreiten und repräsentieren unsere Spaltenzeilen.

Wir können jetzt einige unserer Elemente auf das Netz platzieren wie so:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Wir können diesen Code in der Demo unten in der Praxis sehen.

Siehe die Grundlagen des Stifts
cs

Weiteres Lesen:

Erfahren Sie mehr über benannte Grid -Linien.

• Lesen Sie über benannte Zeilen in der Netzspezifikation.
Gitterelemente mit den benannten Grid -Bereichen

platzieren

Eine der interessantesten und „designerfreundlichsten“ Merkmale des Gitterlayout Legen Sie unsere Netzwerke aus. Es funktioniert so:

Verwenden von Grid-Template-Areas haben wir ein einfaches Textgitter erstellt, in dem angegeben ist, wie Elemente angelegt werden sollen. Jetzt müssen wir diese Bereichsnamen nur auf unsere Elemente anwenden:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Also, der

wird alle vier Spalten überspannen, das Element sitzt gerade in der ersten Spalte der zweiten Zeile und so weiter.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Wir können dies in Aktion im Stift unten sehen.

Siehe die Grundlagen des Stifts

cs

Dieser Code ist viel einfacher als das, was wir früher hatten - egal ob es sich um nummerierte oder benannte Zeilen handelt. Die Verwendung von genannten Grid -Bereichen wie diesen ist fast peinlich einfach - wie die Verwendung eines Wysiwyg -Editors, anstatt echten Code zu schreiben. Aber seien Sie versichert, es ist kein Betrug! Es ist einfach super cool.

Verwenden von Zeilennummern und benannten Linien mit Gitterbereichen

Es ist erwähnenswert, dass wir auch Zeilennummern und/oder benannte Linien verwenden können, um die Netzbereiche zu definieren. Anstatt beispielsweise die Eigenschaft für Gitter-Template zu verwenden, könnten wir einfach so etwas tun:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Das Muster ist Zeilenstart / Spaltenstart / Zeilen-End / Spaltenende. Sie können eine Demo davon auf CodePen überprüfen. Persönlich fällt es mir sehr schwer, sich an dieses Muster von Zeilen und Säulen zu erinnern, aber das Tolle an Grid ist, dass es viele Möglichkeiten gibt, dasselbe zu tun.

Ändern des Layouts von Gitterartikeln

In den alten Tagen, wenn wir uns irgendwann entschieden haben, das Layout unserer Seitenelemente zu ändern, hätte dies wahrscheinlich zu viel Code -Refactoring geführt. Was ist beispielsweise, wenn wir das Element

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Wir haben gerade eine Gitterzelle von Fußzeile entfernt und sie beiseite zugewiesen, was zu dem führt, was wir im Stift unten sehen.

Siehe die Grundlagen des Stifts
cs

Wir könnten sogar entscheiden, dass wir irgendwo eine leere Zelle wollen. Wir tun dies, indem wir nur ein oder mehrere Perioden verwenden, wie SO:

Sehen Sie, ob Sie das Ergebnis davon vorhersagen können, und sehen Sie sich diese Codepen -Demo an.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Weiteres Lesen:

Erfahren Sie mehr über Grid-Template-Areas.

• Erfahren Sie mehr über die Eigenschaft in der Gitterfläche.
Verwenden von Medienabfragen mit Grid -Layout

Wir möchten oft ein anderes Layout auf kleinen Bildschirmen - z. B. das Stapeln unserer Netzelemente in einer einzigen Spalte. Eine einfache Möglichkeit, dies zu tun

Wir haben jetzt nur eine einzige Spalte angegeben und die Reihenfolge der Elemente in dieser Spalte festgelegt.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Siehe die Grundlagen des Stifts

CSS Grid: Verwenden von Medienabfragen von SitePoint (@sitepoint)

auf CodePen.

Drücken Sie die 0,5 -fach -Taste unten im obigen Stift, um zu sehen, wie das Layout reagiert (oder den Stift auf Codepen anzeigen und das Ansichtsfenster vergrößern und einschränken).

Ändern der Anzeigereihenfolge der Netzelemente

Wir sind jetzt in einem guten Punkt, um zu sehen, wie einfach es ist, die Anzeigereihenfolge der Elemente im Netzlayout zu ändern. Im obigen Beispiel lautet unsere Quellbestellung

, , und , aber in unserer Medienabfrage haben wir das -Element so festgelegt, dass sie über dem Element Element angezeigt werden. Es ist so einfach, die Displayreihenfolge von Elementen mit dem Netz zu tauschen! Wir konnten die Anzeigereihenfolge aller sogar vollständig umkehren.

Wir können Gitterelemente neu ordnen, wenn sie nicht benannte Elemente verwenden. Standardmäßig werden Gitterelemente gemäß ihrer HTML -Quellordnung platziert. Sie haben auch eine Standardreihenfolge von 0. Wir können diese Auftragseigenschaft verwenden, um die visuelle Anordnung von Elementen zu ändern. Je niedriger der Bestellwert, desto früher erscheint ein Element. Sogar negative Ganzzahlen können verwendet werden. Wenn unser

Element eine Reihenfolge von -1 hatte, scheint es zuerst.

Um unsere oben gezeigten Elemente zu bestellen, konnten wir den Bestellwert von , und auf 1, 2 bzw. 3 festlegen. (Schauen Sie sich diesen Stift für eine Live -Demo an.)

Ein Wort der Vorsicht: Nachgeordnete Elemente können ein Albtraum für die Zugänglichkeit sein, wobei der Fokus unvorhersehbar auf dem Bildschirm springt. Verwenden Sie es also sparsam.

Weiteres Lesen:

• Die offizielle Spezifikation für die Order -Eigenschaft.
• Die auf MDN erläuterte Ordereigenschaft, einschließlich eines Abschnitts zu Barrierefreiheitsproblemen.

reaktionsschnelles Gitterlayout ohne Medienabfragen

Wir haben oben gesehen, dass wir unser Layout auf verschiedene Bildschirmgrößen ansprechen können. Erstens kann das Layout nach Bedarf wachsen und schrumpfen, indem sie die Spaltenbreiten auf flexible Einheiten wie FR einstellen. Zweitens können wir Medienabfragen verwenden, um das Layout an bestimmten Haltepunkten neu zu organisieren.

Grid Layout verfügt über Tools, mit denen Layout -Reflow ohne die Verwendung von Medienabfragen. Mit dem Layout, mit dem wir oben gearbeitet haben, können wir dies jedoch nicht erreichen. Es funktioniert nur für einfachere Layouts, bei denen jede Spalte die gleiche Breite teilt.

Betrachten Sie die folgenden HTML:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Lassen Sie uns diese Divs nebeneinander auf breiten Bildschirmen setzen und auf kleinen Bildschirmen stapeln:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Sie können das Ergebnis im unten stehenden Stift sehen.

Siehe das Stift
CSS Grid Basics: Responsive Grid ohne Medienabfragen von SitePoint (@sinepoint)
auf CodePen.

(Drücken Sie erneut die 0,5 -fach -Taste unten im obigen Stift, um zu sehen, wie das Layout reagiert.)

Dieser Code ist etwas erweiterter, und wir erklären ihn ausführlich in der Verwendung der Funktion CSS Grid Repect (). Der Hauptzweck, es hier zu zeigen, besteht darin, ein Gefühl dafür zu vermitteln, was mit Gitterlayout möglich ist.

Weiteres Lesen:

• Weitere Informationen zum automatischen Schlüsselwort.
• Lesen Sie mehr über die Verwendung der Funktion minmax () mit der Funktion min ().

überlappende Elemente in einem Raster

Sobald wir ein Gitterlayout erstellt haben, können wir mehr als nur jedes Netzelement in seinem eigenen Gitterbereich zuweisen. Wir können Rasterelemente leicht einstellen, um dieselben Netzbereiche teilweise oder vollständig zu teilen. Auf diese Weise können wir schöne, kreative Layouts erstellen - mit überlappenden Elementen und ohne schwierigen Code.

Erstellen wir ein einfaches Netz, das ein Bild und einen Text enthält, der das Bild teilweise abdeckt. Hier ist die HTML:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Jetzt weisen wir einige Zeilen und Spalten zu, die teilweise zwischen dem Div und dem Bild geteilt werden:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Das Ergebnis ist in der folgenden Codepen -Demo gezeigt.

Siehe die Grundlagen des Stifts
cs

Das Div erscheint über dem Bild, einfach weil es in der Quellreihenfolge nach dem Bild kommt. Wir können das Element ändern, das über den anderen erscheint, indem wir Z-Index anwenden. Versuchen Sie beispielsweise, einen Z-Index von 2 auf das Bild im obigen Stift festzulegen. Es wird nun einen Teil der Div.

abdecken

Weiteres Lesen:

Um die Positionierung des Bildes in der obigen Demo zu verstehen

Erfahren Sie mehr über die Z-Index-Eigenschaft.
einpacken

Dieser Artikel ist nur als grundlegende Einführung in das CSS -Gitterlayout gedacht. Die Hoffnung ist, dass es ein Sprungbrett für weiteres Lernen und Entdeckungen bietet. Und es gibt eine riesige

-Mübe, die Sie über das Netz lernen können.

Gitter gegen Flexbox Eine ewige Frage ist, ob wir Raster oder Flexbox verwenden sollten. Es ist wahr, dass es einige Überlappungen zwischen den beiden Layout -Tools gibt. Oft lohnt es sich, ein paar Tests durchzuführen, um zu sehen, welche in jedem bestimmten Szenario das bessere Toolkit aufweist.

.

In der Regel denken Sie jedoch daran:

Flexbox wurde hauptsächlich zum Auslegen von Elementen in eine einzelne Richtung entwickelt (auch wenn diese Elemente über Linien wickeln).

Grid ist zum Auslegen von Elementen in zwei Richtungen ausgelegt, damit sie sowohl horizontal als auch vertikal ausgerichtet sind.
• Aus diesem Grund ist Grid im Allgemeinen eine bessere Option für ganzseitige Layouts, während Flexbox besser ist, um Dinge wie Menüs auszusetzen.

Weitere Informationen zu Gitter und Flexbox finden Sie in Flexbox oder CSS-Raster? Wie man Layoutentscheidungen trifft, die sinnvoll sind.

Browserunterstützung für Gitter

Als wir diesen Artikel im Jahr 2016 zum ersten Mal veröffentlichten, war das Netz für Browser ziemlich neu und die Unterstützung war nicht universell. Heutzutage unterstützen alle großen Browser das Netz. Es wird immer noch einige ältere Browser geben, die es nicht unterstützen, aber in vielen Fällen zeigen diese Browser den Inhalt immer noch gut genug an. Ein schöner Catch-All-Ansatz besteht darin, mit einem einspaltigen Layout für mobile Geräte zu beginnen, die als Fallback für Browser dienen können, die kein Gitterlayout unterstützen. Die Netzstile können über Medienabfragen für Browser hinzugefügt werden, die sie unterstützen - die auf breiteren Bildschirmen angezeigt werden.

Sie können den neuesten Browser -Support für das Netz auf Caniuse überprüfen.

Lernressourcen für Gitter

lernen

Schließlich enden wir mit einigen weiteren Lernressourcen. Viele tolle Leute haben Tutorials, Videos, Bücher und mehr über das Netz bereitgestellt. Hier sind nur einige:

• CSS Master, 3. Auflage , von Tiffany Brown, ist eine großartige Einführung in CSS mit ausführlicher Anleitung zur Verwendung von Raster und anderen Layoutmethoden.
• Die MDN -Gitterreferenz.
• Das Raster an der Beispielstelle von Rachel Andrew. (Tatsächlich hat Rachel Andrew viele unglaubliche Artikel, Tutorials, Videos und sogar ein Buch zum Gitterlayout und ist ein wichtiger Experte dafür. Googeln „Rachel Andrew Grid“ wird Tonnen von großartigem Material zum Lernen für Gitter hervorrufen.)
• Die Layout -Land -YouTube -Serie von Jen Simmons. (Jen ist ein anderer Name, der es wert ist, gegoogelt zu werden.)
• Kevin Powell präsentiert viele fantastische Raster -Tutorials auf YouTube, die es wert sind, es zu überprüfen.
• CSS-Tricks bietet eine vollständige Anleitung zum CSS-Netz, was eine sehr praktische Ressource ist.

FAQs über CSS -Gitterlayout

Was ist CSS-Gitterlayout? Es bietet eine flexiblere und effizientere Möglichkeit, Elemente in einem Raster zu entwerfen und zu positionieren. Netz; Eigenschaft in Ihrem CSS -Code. Dadurch wird der ausgewählte Behälter zu einem Rasterbehälter. Der Container wird mithilfe des Displays: Grid definiert; Eigenschaft und die Elemente sind die Elemente im Behälter.

Wie definiere ich Zeilen und Spalten in einem CSS-Gitter? -Rows, Grid-Template-Säulen oder Verwenden der Kurzform-Eigenschaft-Gitter-Template. Spaltenbreiten und Zeilenhöhen durch Verwendung verschiedener Werte in Ihrer Gitter-Template-Definition, z.

Kann ich Gitter in Gitter nisten? Kann ich die Netze an verschiedene Bildschirmgrößen anpassen lassen? Sie können Medienabfragen, Prozentsätze oder relative Einheiten verwenden, um Ihr Netzlayout an verschiedene Bildschirmgrößen und -geräte anzupassen.

Das obige ist der detaillierte Inhalt vonEin Anfänger -Leitfaden zum CSS -Rasterlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!