Detaillierte Kenntnisse zum CSS-Rasterlayout, die Sie nicht verpassen dürfen!

Dieser Artikel wird Ihnen einige Wissenspunkte zum CSS-Rasterlayout vermitteln und Sie dabei unterstützen, mehr über das CSS-Rasterlayout zu erfahren.

Heutzutage gibt es viele Funktionen, die für modernes Weblayout verwendet werden können. Das vielleicht bekannteste ist Flexbox, und jeder glaubt, dass das Flexbox-Layout leicht zu lösen ist. Obwohl das Flexbox-Layout sehr leistungsfähig ist, handelt es sich immer noch um ein eindimensionales Layout. Für einige zweidimensionale Layoutszenarien weist es immer noch große Einschränkungen auf. Dies zeigt auch, dass CSS Grid nach wie vor unverzichtbar für moderne Weblayouts oder zukünftige Layoutlösungen ist, denn es ist bisher die einzige Technologie, die zweidimensionales Layout unterstützt. Im Jahr 2021 habe ich einige Monate damit verbracht, alles rund um CSS Grid zu besprechen und CSS Grid in mehr als 20 Artikeln erklärt. Man kann sagen, dass diese Serie die systematischste Einführung in CSS Grid im gesamten Internet ist. Wenn ich noch nicht damit in Berührung gekommen bin oder eine gewisse Angst vor CSS Grid habe, ist diese Serie Ihre Zeit wert.

Wichtige Begriffe in CSS Grid

Jedes Funktionsmodul hat seine eigene Fachterminologie, und CSS Grid ist keine Ausnahme, aber die technische Terminologie von CSS Grid deckt einen größeren Bereich ab. In diesem Artikel werden verwandte Begriffe in CSS Grid ausführlich erläutert, wie z. B. Rasterachse, Rastercontainer, Rasterelement, Rasterlinie, Rasterzelle, Rasterspur, Rasterfläche, explizites Raster, implizites Raster, Rasterabstand (Rasterschlitz), Untergitter und verschachteltes Gitter usw.

Grid-Eigenschaften und -Größen

Sobald Sie ein gewisses Verständnis der technischen Begriffe im Zusammenhang mit dem CSS-Grid-Layout haben, können Sie beginnen, die Eigenschaften, die im CSS-Grid verwendet werden können, wirklich zu verstehen. In diesem Abschnitt besprechen wir mit Ihnen hauptsächlich die Eigenschaften, die für Rastercontainer verwendet werden können, und legen die Größe von Rastercontainern und Rasterelementen fest. Zu diesem Zweck können wir ein explizites Raster mithilfe von Eigenschaften wie „grid-template-columns“, „grid-template-rows“ und „grid-template-areas“ definieren.

Einstellung der Rasterspurgröße

In CSS Grid können Rastervorlagenspalten und Rastervorlagenzeilen verwendet werden, um Rasterspuren explizit zu definieren. In diesem Abschnitt besprechen wir jedoch hauptsächlich die Einheiten, die zum Festlegen der Rasterspurgröße verwendet werden können, insbesondere die eindeutige Einheit fr in CSS Grid.

Verwenden Sie intrinsische Abmessungen, um die Größe der Rasterspur zu definieren

In Rastervorlagenspalten und Rastervorlagenzeilen zusätzlich zu Längeneinheiten () auch Prozenteinheiten () und Zusätzlich zum Festlegen der Größe der Rasterspur in der Einheit des elastischen Faktors (fr) können Sie auch einige Schlüsselwörter verwenden (z. B. none, auto, min-content, max-content, fit-content und fit-content() ), um die Größe der Rasterspur festzulegen. Unter diesen werden Min-Content, Max-Content und Fit-Content auch aufgerufen, indem sie intrinsische Dimensionen verwenden, um die Größe der Rasterspur festzulegen.

Verfügbare Funktionen im Raster

grid-template-columns und grid-template-rows sowie die Verwendung fester Längenwerte, dynamischer Werte und einiger Schlüsselwörter zum Festlegen der Größe von Rasterspuren (d. h. mithilfe von Extrinsic und Intrinsic). (Maße zum Festlegen der Rasterschienenabmessungen). Wir können auch einige Funktionen in CSS Grid verwenden, z. B. minmax(min, max), repeat() und CSS-Vergleichsfunktionen (z. B. min(), max() und clamp()), um die Größe der Rasterspur festzulegen even Diese Funktionen können auch ineinander verschachtelt sein.

Explizites Raster und implizites Raster

Verwenden Sie Rastervorlagenspalten, Rastervorlagenzeilen und Rastervorlagenbereiche, um ein explizites Raster explizit zu definieren. Darüber hinaus können Sie Grid-Auto-Columns, Grid-Auto-Rows und Grid-Auto-Flow verwenden, um ein implizites Raster zu definieren.

Automatische Platzierung von Rasterelementen

Im CSS-Rasterlayout können durch die Verwendung von Eigenschaften wie Rasterzeile, Rasterspalte und Rasterbereich für Rasterelemente Rasterelemente eindeutig an der angegebenen Position im Raster platziert werden. Darüber hinaus enthält die CSS-Grid-Layout-Spezifikation noch einen weiteren Regelsatz, der festlegt, wie Grid-Elemente, denen keine explizite Position zugewiesen ist, platziert werden sollen. Das heißt, Sie verwenden „grid-auto-flow“, um die automatische Rasterplatzierung festzulegen.

Gitterlinien im Rasterlayout

Im CSS-Rastersystem sind Gitterlinien ein sehr wichtiges Konzept. Standardmäßig werden bei der Definition eines Rastersystems standardmäßig numerische Rasterliniennamen (Zeilenrasterliniennamen und Spaltenrasterliniennamen) erstellt. Darüber hinaus können Sie in „grid-template-columns“ und „grid-template-rows“ auch explizit Namen für Rasterlinien in eckigen Klammern [] angeben. Wie bereits erwähnt, ist das CSS-Gittersystem in explizite Gitterlinien und implizite Gitterlinien unterteilt. Die Gitterlinien werden auch explizite Gitterlinien genannt. und die Gitterlinien, die sich auf dem impliziten Gitter befinden, werden implizite Gitterlinien genannt. Und im Rastersystem sind Rasterlinien für die eindeutige Platzierung von Rasterelementen unverzichtbar. Mit anderen Worten: Die Benennung von Rasterlinien wirkt sich direkt auf die Platzierung unserer Rasterelemente aus. In diesem Artikel besprechen wir hauptsächlich mit Ihnen, wie man Gitterlinien benennt. Bei Interesse lesen Sie bitte weiter.

Gitterlinien sind in Rasterlayoutsystemen sehr wichtig. Obwohl der vorherige Inhalt nicht näher auf das relevante Wissen über Gitterlinien im Rasterlayoutsystem eingeht, ist es nicht schwer herauszufinden, dass Rastervorlagenspalten, Rastervorlagenzeilen und Rastervorlagenbereiche Eigenschaften wie Raster- Auto-Columns, Grid-Auto-Rows und Grid-Auto-Flow erstellen Gitterlinien, und Grid-Column, Grid-Zeile und Grid-Area auf Rasterelementen können Gitter durch Gitterlinien platzieren und sogar öffnen mehr Möglichkeiten bei der Erstellung von Layoutsystemen. In diesem Abschnitt werfen wir einen genaueren Blick auf die verschiedenen Möglichkeiten, Raster in CSS-Rasterlayouts zu benennen, und auf einige der interessanten Möglichkeiten, die sich daraus ergeben.

Rasterelemente platzieren

Zusätzlich zur automatischen Platzierung von Rasterelementen im CSS-Raster (im Allgemeinen mithilfe von Grid-Auto-Rows, Grid-Auto-Columns und Grid-Auto-Flow) können Sie auch Rasterelemente platzieren Im Netzwerk werden Rasterelemente explizit mithilfe von Rasterzeile, Rasterspalte und Rasterbereich platziert, um Rasterliniennamen festzulegen.

Automatischer Platzierungsalgorithmus für Rasterelemente

Im CSS-Rasterlayout gibt es viele Möglichkeiten, Rasterelemente explizit an bestimmten Stellen zu platzieren. Zum Beispiel:

• Verwenden Sie „grid-row-start“, „grid-row-end“, „grid-column-start“ und „grid-column-end“, um Rasterliniennamen anzugeben und Rasterelemente zu platzieren.
• Verwenden Sie „grid-row-start“, „grid-column-end“. Die Abkürzungseigenschaften „row-end“, „grid-column-start“ und „grid-column-end“ geben den Namen der Rasterlinie und die Platzierung der Rasterelemente an.
• Verwenden Sie „grid-area“, um den Rasternamen anzugeben oder das Raster anzugeben -template Der Name des durch -areas definierten Rasterbereichs. Platzieren Sie das Rasterelement.
• Geben Sie das Raster in „grid-row-start“, „grid-row-end“, „grid-column-start“, „grid-column-end“ oder „grid-row“ an , den Zeilennamen der Rasterspalte und verwenden Sie span, um die zusammengeführten Rasterzellen anzugeben. Ihre Kombination zum Platzieren von Rasterelementen
• in „grid-row-start“, „grid-row-end“, „grid-column-start“, „grid-column-end“ (und ihren Kurzattributen „grid-row“, „grid-column“) oder „grid-“ geben Sie an Rasterlinienname, definiert durch Rastervorlagenzeilen, Rastervorlagenspalten und Rastervorlagenbereiche im Bereich zum Platzieren des Rasterelements
• Verwenden Sie den benannten Rasterliniennamen und das Schlüsselwort span, um das Rasterelement zu platzieren
• Geben Sie den Namen an des Rasterbereichs, der durch Rastervorlagenbereiche oder Rastervorlagenzeilen und Rastervorlagenspalten im Rasterbereich erstellt wird, und platzieren Sie die Rasterelemente.

Allerdings haben Rasterelemente im Rasterlayoutsystem ihre eigene Platzierung eigener Satz ausgereifter Algorithmen. In diesem Kapitel unterteilen wir es in fünf Schritte, um über den Algorithmus zur Platzierung von CSS-Grid-Rasterelementen zu sprechen (automatische Platzierung und explizite Platzierung).

Überlappung und Z-Achsen-Hierarchie von Rasterelementen

Rasterelemente können Eigenschaften wie Rasterzeile, Rasterspalte und Rasterbereich verwenden, um Rasterelementpositionen basierend auf Rasterliniennamen explizit anzugeben. Dadurch können Rasterelemente einander überlappen. Mit anderen Worten: In CSS Grid können Sie die folgenden Methoden verwenden, um Rasterelemente einander überlappen zu lassen:

• Verwenden Sie Rasterlinien-Indexnummern
• Verwenden Sie benannte Rasterlinien
• Verwenden Sie benannte Rasterbereiche
• Gitterzellen zusammenführen (d. h. über Rasterelemente hinweg)

Was noch interessanter ist, ist, dass CSS-Rasterelemente die Position nicht explizit auf einen nicht statischen Wert festlegen müssen, damit der Z-Index wirksam wird, d. h. im Netzwerk Wenn sich Rasterelemente überlappen, können Sie dies tun Legen Sie den Z-Index explizit direkt auf dem Rasterelement fest, um die Z-Achsenebene des Rasterelements zu steuern.

Ausrichtung und Abstände im Rasterlayout

Wenn Sie mit der Ausrichtung im Flexbox-Layout vertraut sind, ist die Ausrichtung im CSS-Raster leicht zu beherrschen. Da es Flexbox sehr ähnlich ist, verwenden beide die Funktionen der CSS Box Alignment Module Level 3-Spezifikation. In diesem Kapitel wird die Ausrichtung von Rasterelementen und Rasterspuren im Rasterlayout ausführlich vorgestellt. Darüber hinaus wird auch die Beziehung zwischen Ausrichtung und Rand (wie man den Rand zum Festlegen der Ausrichtung von Rasterelementen verwendet) vorgestellt.

Darüber hinaus wird am Ende des Artikels auch das Gap-Attribut vorgestellt, d.

Seitenverhältnis von Rasterelementen

In diesem Kapitel werden hauptsächlich die Einstellungen des Seitenverhältnisses von Rasterelementen besprochen, d. Darüber hinaus werden auch „padding-top“ oder „padding-bottom“ sowie benutzerdefinierte CSS-Eigenschaften und die Funktion „calc()“ eingeführt, um das Seitenverhältnis von Rasterelementen zu implementieren.

Schreibmodus im Raster

In diesem Artikel spreche ich hauptsächlich über die Auswirkungen von

CSS-Logikeigenschaften

und CSS-Schreibmodus auf das Rasterlayout. Zum Beispiel die Beziehung zwischen der automatischen Platzierung von Rasterelementen und dem Schreibmodus, die Beziehung zwischen der Platzierung von Rasterelementen basierend auf Rasterlinien und dem Schreibmodus und die Beziehung zwischen Rasterfläche und Schreibmodus usw.

Nested Grids vs. Subgrids

Seit einiger Zeit gibt es viele Diskussionen über die Anwendungsfälle für Subgrids, wie man sie implementiert und sogar darüber, ob sie überhaupt benötigt werden. Ein Großteil der Diskussion drehte sich um zwei andere Methoden, die sich mit vielen der gleichen Probleme wie Subgrid befassen: verschachtelte Gitter und display:contents. Dieser Artikel verwendet verschachtelte Gitter als Einstiegspunkt und geht ausführlich auf verschachtelte Gitter und Untergitter ein. Das heißt, wir werden verstehen, was ähnlich ist und was die Unterschiede zwischen Untergittern und verschachtelten Gittern sind. Außerdem wird darauf hingewiesen, dass es einige sehr effiziente Fälle gibt, in denen Unternetze wirklich benötigt werden, während dies in anderen Fällen nicht unbedingt erforderlich ist, aber zu einer saubereren Lösung führt.

subgrid vs display: content

subgrid Vor der Einführung der Level-2-Spezifikation des CSS-Grid-Layoutmoduls wurden verschachtelte Raster, Subgrid und Display: Content ausführlich besprochen, und schließlich erhielt Subgrid mehr Unterstützung wurde Teil der Norm. Mit anderen Worten: Sowohl verschachtelte Raster als auch Anzeigeinhalte können ein unterrasterartiges Layout erreichen. Lassen Sie uns in diesem Kapitel mit Ihnen besprechen, was der Unterschied zwischen display:content und subgrid ist.

Wasserfall-Layout

Da das Mehrspalten-Layout, das Flexbox-Layout und das Raster-Layout von Browsern unterstützt werden, können Sie diese Funktionen zum Implementieren des Wasserfall-Layouts verwenden. Das durch diese Technologien implementierte Wasserfall-Layout ist jedoch alle oder mehrere vorhanden einige Mängel sein. Glücklicherweise integriert das CSS Grid Layout Module Level 3 das echte Wasserfall-Flow-Layout in die W3C-Spezifikation, das man als echtes Wasserfall-Flow-Layout bezeichnen kann. Leider gibt es nicht viele Mainstream-Browser, die diesen Spezifikationsentwurf unterstützen, sondern nur Firefox und Firefox Nightly. Obwohl diese Funktion noch nicht für den Produktionseinsatz bereit ist, sind Ihr Test und Ihr Feedback nach der Verwendung wertvoll, um sicherzustellen, dass sie Ihren Anforderungen für dieses Layout entspricht.

Grid Inspector Grid Layout anpassen

Aus den vorherigen Inhalten ist es nicht schwer, die Komplexität und Flexibilität des Grid-Layouts zu erkennen. Ich denke, jeder hat erkannt, dass sich nach der Einführung von CSS Grid auch die Methode zum Entwerfen von Layouts im Web geändert hat. Wir können das Layout auf Papier skizzieren und darüber nachdenken, worum es bei der Layoutgestaltung geht. Wenn Sie mit der Codeeingabe beginnen, wissen Sie bereits, wie das Layout aussehen wird. Aufgrund der Komplexität des CSS-Rasterlayouts und der Tatsache, dass das im Rastercontainer definierte Raster unsichtbar ist. Aus diesem Grund müssen wir darüber nachdenken, wie wir Raster einfacher verwenden oder Fehler im Zusammenhang mit dem Rasterlayout beheben können. Studierende, die mit der Webentwicklung vertraut sind, wissen, dass sie beim Debuggen von Layout- oder CSS-bezogenen Problemen gerne einen Rahmen zu einem Element hinzufügen. Im Rasterlayout können zwar ähnliche Methoden zum Hinzufügen von Rändern zu Rastercontainern und Rasterelementen verwendet werden, um uns bei der schnellen Positionierung zu helfen, wir können jedoch keine Ränder zu Rasterlinien hinzufügen. Glücklicherweise bieten die aktuellen Mainstream-Browser wie Chrome, Firefox, Safari und Microsoft Edge-Browser-Entwicklertools (DevTools) alle Rasterlayout-Inspektoren. Mit diesen Tools können wir uns schnell bei der Verwendung des Rasters helfen und Probleme beheben, die bei der Verwendung des Rasters auftreten.

Grid-Layout-Fälle und -Funktionen

Das Aufkommen des CSS-Grid-Moduls und die Browserunterstützung dafür bieten beispiellose Möglichkeiten für das Web-Layout. Wir können komplexere Designs mit weniger Elementen erstellen (einfachere HTML-Struktur). Dies ist viel leistungsfähiger als Flexbox, das wir immer als sehr leistungsfähig angesehen haben. Aber wenn Sie an CSS Grid denken, denken Sie normalerweise an das quadratische Layout, das wir gewohnt sind, oder? @Andy Barefoot bietet viele kreative responsive Layout-Effekte auf seiner persönlichen Website und Codepen, die Ihnen ein völlig neues Gefühl für das Web-Layout vermitteln, das Ihrem klassischen Webdesign (normales quadratisches Layout) ähnelt, und dazu verwendet er CSS-Raster-Layout Mach das.

Verwenden Sie die Rasterkonstruktion, um überlappende Layouts zu erstellen.

Im CSS-Rasterlayout können wir verschiedene Elemente durch die Platzierung von Rasterelementen übereinander platzieren und das Raster über die Stapelreihenfolge des CSS-Z-Index steuern von Rasterelementen auf der Z-Achse. Mit anderen Worten: Das Layout, das früher mithilfe der absoluten Positionierung der CSS-Position implementiert wurde, kann jetzt direkt mit CSS Grid gelöst werden. In diesem Fall betrachten wir hauptsächlich die Verwendung von CSS Grid, um den Layouteffekt der Elementüberlagerung zu erzielen.

Erstellen Sie ein vollflächiges Layout mithilfe eines Rasters

Full-Bleed ist ein Konzept in der Druckwelt, bekannt als Full-Bleed, das heißt, beim Drucken haben wir Beschnitt, also den Bereich außerhalb der Stelle, an der das Papier beschnitten wird. Aus diesem Grund sind Druckdesigner es gewohnt, bei ihrer Designarbeit den Beschnitt zu berücksichtigen. Dies erreichen wir durch die Einrichtung sicherer Zonen. In den letzten Jahren wurde dieses Konzept namens „Full Bleed“ auch auf das Layout des Webs angewendet. Hierbei handelt es sich um ein Layout, das Elemente in voller Breite in einer Spalte mit eingeschränkter Breite verwendet, beispielsweise ein Bild von Kante zu Kante in einer schmaleren Textspalte. In der Community nennen einige Leute diesen Layouteffekt auch „Full-Width-Layout“, andere nennen ihn „Edge-to-Edge-Layout“. Ehrlich gesagt ist es nicht schwierig, diesen Layout-Effekt im Web zu erzielen. In der Community gibt es viele verschiedene technische Lösungen, die diesen Layout-Effekt erzielen können. Heute denken wir jedoch aus einem anderen Blickwinkel darüber nach!

Verwenden Sie ein Raster, um ein Cross-Layout zu erstellen

In diesem Fall soll ein anderes von CSS Grid erstelltes Rasterlayout eingeführt werden, nämlich das Cross-Layout. Dieser Fall wird uns besser helfen, besser zu verstehen, wie die zugehörigen Eigenschaften von CSS Grid in der Praxis (Weblayout) verwendet werden.

Verwenden Sie Raster, um Zeitschriften- und Zeitungslayouts zu erstellen

Seit langem werden quadratische Rechtecke verwendet, um Benutzern in Weblayouts UI-Effekte anzuzeigen, und dies ist auch in den Köpfen vieler Webentwickler der Fall . Das Layout kann die Beschränkung der rechteckigen Anordnung nicht durchbrechen! Aber die Entwicklungsgeschwindigkeit der Web-Technologie ist erstaunlich und jeden Tag tauchen neue Dinge vor uns auf. In nur wenigen Jahren gab es so viele neue Funktionen für das Weblayout. Mit anderen Worten, wenn Ihnen heute ein Designer sagt: „Lieber, lass uns ein Layout erstellen, das einer Zeitschrift oder Zeitung ähnelt“! Sie werden gerne sagen: OK! Das heißt, mit den aktuellen neuen Funktionen können Sie die Einschränkungen des rechteckigen Rahmens überwinden und ein magazinähnliches Layout im Web erreichen.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Kenntnisse zum CSS-Rasterlayout, die Sie nicht verpassen dürfen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!