8 hochmoderne CSS-Funktionen (und deren Verwendung)
CSS wird ständig weiterentwickelt und eine Reihe aufregender neuer Funktionen wurden hinzugefügt, um die Spezifikation zu einer noch leistungsstärkeren Waffe im Toolset eines Webdesigners zu machen.
CSS Grid bringt Layouts auf eine neue Ebene, die zuvor noch nicht gesehen wurde. Benutzerdefinierte Eigenschaften führen das Konzept von Variablen ein, während Feature-Abfragen die Browserunterstützung überprüfen. Medienabfragen werden durch neue Eingabehilfen verbessert. Variable Schriftarten bieten maximale Kreativität bei minimalem Aufblähen des Codes, während das Scrollen durch Scrollen kein JavaScript benötigt. Schauen Sie sich unsere coolen CSS-Animation Beispiele, um zu sehen, was Sie erstellen können. Oder versuchen Sie diese, um eine Site ohne Code zu erstellen Website-Ersteller .
Für diejenigen, die kreativ werden möchten, gibt es CSS-Formen für einzigartige Layouts und eine Vielzahl von Mischmodi und Filtern, um Designeffekte im Photoshop-Stil einzuführen. Lesen Sie weiter, um herauszufinden, wie Sie diese unverzichtbaren Funktionen in Ihren neuesten Builds verwenden können. Aber denken Sie daran, eine komplexe Website bedeutet, dass Sie eine benötigen Web-Hosting Service, der Ihre Bedürfnisse unterstützen kann.
01. Benutzerdefinierte Eigenschaften
Wenn Sie einen Präprozessor wie Sass oder eine Programmiersprache wie JavaScript verwenden, sind Sie zweifellos mit dem Konzept von Variablen vertraut - Werten, die für die Wiederverwendung im gesamten Code definiert sind. Benutzerdefinierte Eigenschaften ermöglichen es uns, dies in unserem CSS zu tun, ohne dass Präprozessoren erforderlich sind. Variablen können auf der Root-Ebene festgelegt werden (Erstellen globaler Variablen) oder innerhalb eines Selektors festgelegt werden. Sie können dann mit der Syntax aufgerufen werden var (- & rsaquo; -myVariableName). Zum Beispiel könnten wir eine Variable namens setzen --Primärfarbe so was:
/* On the root element (a global variable) */ :root { --primaryColor: #f45942; } /* Scoped to a selector */ .my-component { --primaryColor: #4171f4; }Jetzt können wir diese Variable als Eigenschaftswert verwenden:
h1 { color: var(--primaryColor); }Benutzerdefinierte Eigenschaften werden vererbt, was einige sehr nützliche Auswirkungen hat. Eines davon ist das Thema. Nehmen Sie das obige Beispiel: Wir können eine globale Variable (# f45942 - ein leuchtendes orange-rot) für definieren --Primärfarbe Auf der Stammebene ist der Wert also in jeder Instanz, in der wir diese Variable verwenden, rot. Wir definieren aber auch dieselbe Variable in einem Selektor mit einem anderen Wert neu (# 4171f4 - mittelblau). Also für jeden Fall, in dem wir das verwenden --Primärfarbe Variable innerhalb dieses Selektors, der berechnete Wert ist blau.
Standardeinstellungen festlegen
Das Scoping von Variablen ist eine großartige Funktion, die Sie jedoch gelegentlich überraschen kann! Wenn Sie versuchen, eine noch nicht definierte Variable zu verwenden, wird der resultierende Wert auf die Standardeinstellung des Browsers oder einen geerbten Wert zurückgesetzt und nicht auf eine weiter oben in der Kaskade definierte Variable. In einigen Fällen kann es angebracht sein, einen Standardwert festzulegen:
h1 { color: var(--primaryColor, blue); }Wie unterscheiden sich benutzerdefinierte Eigenschaften von Präprozessorvariablen?
Benutzerdefinierte Eigenschaften unterscheiden sich in einigen wesentlichen Punkten von Präprozessorvariablen. Präprozessorvariablen werden kompiliert, bevor Ihr Code an den Browser gesendet wird. Der Browser sieht nie, dass ein Wert eine Variable ist, er sieht nur das Endergebnis. Benutzerdefinierte Eigenschaften werden im Browser berechnet. Sie können sie in modernen Entwicklertools überprüfen, die Variable ändern und den aufgelösten Wert anzeigen. Sie sind dynamische Variablen, dh ihre Werte können innerhalb von CSS oder zur Laufzeit mit JavaScript geändert werden.
Im Gegensatz zu Präprozessorvariablen können benutzerdefinierte Eigenschaften nicht in Selektornamen, Eigenschaftsschlüsseln oder Deklarationen für Medienabfragen verwendet werden - nur in CSS-Eigenschaftswerten. CSS-Präprozessoren bieten immer noch viele Vorteile, sodass sie wahrscheinlich noch eine Weile bestehen bleiben, aber sie werden wahrscheinlich häufiger in Kombination mit benutzerdefinierten Eigenschaften verwendet.
02. Funktionsabfragen
Mit Feature-Abfragen können Sie testen, ob ein Browser eine bestimmte CSS-Eigenschafts-Wert-Kombination in Ihrer CSS-Datei unterstützt. Sie machen praktisch keine Feature-Erkennungsbibliotheken wie Modernizr mehr erforderlich. Die Syntax ähnelt einer Medienabfrage: Sie verwenden die at-Regel @ unterstützt , gefolgt von Ihrem Eigenschafts-Wert-Paar, umschließt den auszuführenden Code, wenn der Browser die angegebenen Bedingungen erfüllt.
Feature-Abfragen werden in modernen Browsern gut unterstützt, sind jedoch relativ neu. Ein Problem ist, dass einige Browser, die Sie möglicherweise auf Unterstützung testen möchten, Feature-Abfragen selbst möglicherweise nicht unterstützen. Der beste Weg, dies zu handhaben, besteht häufig darin, zuerst Fallback-Stile (außerhalb der Feature-Abfrage) bereitzustellen und dann Ihre Verbesserungen für die Unterstützung von Browsern in das zu packen @ unterstützt Regel.
Beachten Sie, dass Feature-Abfragen nur sparsam verwendet werden müssen. Eine der großartigen Funktionen von CSS ist, dass Browser Eigenschaften oder Werte, die sie nicht verstehen, einfach ignorieren. Es ist am besten, Feature-Abfragen nur zu verwenden, wenn dies nicht der Fall ist. Dies würde einen visuellen Fehler verursachen. Andernfalls könnten Sie sich auf eine Menge zusätzlicher Arbeit einstellen.
So verwenden Sie Feature-Abfragen
Um die Unterstützung eines einzelnen Eigenschaftswerts zu testen, können wir zuerst den Fallback bereitstellen. In diesem Beispiel bieten wir einen Flexbox-Fallback für Browser, die das Grid-Layout nicht unterstützen.
.my-component { display: grid; } @supports (display: grid) { .my-component { display: flex; } }03. Medienabfragen
Sie sind wahrscheinlich daran gewöhnt, Medienabfragen zu verwenden, um die Breite und Höhe des Ansichtsfensters sowie den Medientyp (am häufigsten Bildschirm oder Druck) zu ermitteln. Die Spezifikation für Medienabfragen der Stufe 5 bringt uns einige neuere Medienfunktionen zum Testen (optional), die in einigen Browsern bereits unterstützt werden. Diese bieten einige große Vorteile für die Zugänglichkeit.
Benutzer mit vestibulären Störungen und solche, die an Reisekrankheit leiden, schätzen Webseiten mit viel Bewegung wie Animationen und Parallaxen-Bildlaufeffekten möglicherweise nicht. Mithilfe der Abfrage für Medien mit reduzierter Bewegung können wir Benutzern, die sich abmelden, eine Alternative mit reduzierter Bewegung anbieten.
.my-element { animation: shake 500ms ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; } }Es wird immer beliebter, dass Websites ein alternatives dunkles Thema anbieten. Mit dem Präferenz-Farbschema können wir abfragen, ob der Benutzer eine systemweite Präferenz festgelegt hat (unter Verwendung der Schlüsselwörter dunkel, hell oder ohne Präferenz), und das entsprechende Farbschema entsprechend anzeigen.
/* Media queries 02 */ body { background: linear-gradient(to bottom, #b5faff, #ffe2b4); } @media (prefers-color-scheme: dark) { body { color: white; background: linear-gradient(to bottom, #0c1338, #3e3599); } }04. Variable Schriftarten
Wenn wir mehrere verschiedene Schriftarten derselben Familie in unsere Webseite aufnehmen möchten, müssen wir im Allgemeinen die gleiche Anzahl von Schriftdateien laden. Je mehr Schriftdateien Sie laden, desto mehr Gewicht wird Ihrer Seite hinzugefügt, was sich auf die Leistung auswirkt. Daher ist es normalerweise ratsam, maximal drei oder vier Schriftdateien zu laden (abhängig von Ihrem Leistungsbudget).
Variable Schriftarten ändern das alles. Sie ermöglichen es uns, eine einzelne Schriftdatei für eine ganze Schriftfamilie zu laden. Obwohl diese Datei normalerweise größer ist als eine einzelne Schriftart, ist eine variable Schriftart die leistungsfähigere Lösung, wenn Sie unterschiedliche Gewichte und Stile nutzen möchten. Wenn Sie eine ganze Schriftfamilie gekauft haben, denken Sie daran, diese sicher aufzubewahren Cloud-Speicher Damit Sie Ihre Dateien nicht verlieren!
Variationsachse
Darüber hinaus sind wir bei variablen Schriftarten nicht auf eine kleine Teilmenge der Schriftstärken beschränkt. Bei der Arbeit mit normalen Schriftarten werden die verfügbaren Schriftstärken in Vielfachen von 100 angegeben. In der Regel sind 400 das normale Gewicht, 300 das geringe Gewicht und 700 das fette Gewicht - wobei verschiedene Familien mehr oder weniger Gewichte liefern. Variable Schriftarten haben eine Variationsachse, die uns einen Wertebereich für Eigenschaften wie die Schriftstärke bietet. Eine Schriftart könnte eine Achse von 1 bis 900 haben, wodurch wir auf 900 verschiedene Gewichte zugreifen können!
Die Variationsachse ist nicht nur auf das Gewicht beschränkt. Variable Schriftarten können unterschiedliche Achsen für x-Höhe, Neigung, Serifenlänge und Kontrast haben (um nur einige Beispiele zu nennen) - was bedeutet, dass eine einzelne Schriftartdatei uns den Zugriff auf Hunderte oder sogar Tausende von Variationen ermöglichen kann! Wir könnten diese Eigenschaften sogar animieren und so einige wirklich coole Effekte erzielen. Mandy Michael ( https://codepen.io/mandymichael ) hat eine ganze Menge kreativer Demos, die die Grenzen wirklich testen.
Die Browserunterstützung für variable Schriftarten ist ziemlich gut, und viele Schriftgießereien entwickeln aktiv neue variable Schriftarten, die Sie jetzt verwenden können - obwohl diese häufig einen hohen Stellenwert haben, insbesondere für die voll ausgestatteten Schriftfamilien. Wenn Sie nur mit variablen Schriftarten herumspielen möchten, um zu sehen, was sie können, gibt es eine Reihe von Spielplatzseiten für variable Schriftarten:
Beachten Sie, dass Sie, wenn Sie jetzt variable Schriftarten verwenden möchten, sicherstellen müssen, dass Sie ein aktuelles Betriebssystem verwenden. Diese funktionieren auf älteren Betriebssystemen nicht.
Einstellungen für Schriftvariationen
Während wir die Schriftgröße mit dem leicht genug ändern können Schriftgröße CSS-Eigenschaft, Einstellungen für Schriftartenvariationen ist eine neue Eigenschaft, mit der wir uneingeschränkten Zugriff auf die verschiedenen Variationsachsen einer Schriftart erhalten. Dazu gehören sowohl registrierte als auch benutzerdefinierte Achsen.
Registrierte Achsen
Es gibt fünf verschiedene registrierte Achsen, die verschiedenen CSS-Eigenschaften entsprechen. Jedes dieser Elemente verfügt über ein sogenanntes 'Achsen-Tag'. Die registrierten Achsen sind: Gewicht (Schriftgröße), wdth (Schriftdehnung), SIND (Schriftstil: schräg / Winkel), trinken (Schriftstil: kursiv), opsz (Schriftgröße). Wir können auf diese Achsen entweder über die CSS-Eigenschaft oder mit zugreifen Einstellungen für Schriftartenvariationen .
Diese Achsen sind nicht unbedingt alle in jeder variablen Schriftart enthalten (einige haben möglicherweise nur eine oder zwei Achsen), aber sie sind wahrscheinlich die häufigsten.
Benutzerdefinierte Achsen
Benutzerdefinierte Achsen sind maßgeschneiderte Achsen, die vom Schriftdesigner bereitgestellt werden und alles Mögliche sein können. Sie könnten (zum Beispiel) Serifenlänge, x-Höhe und sogar etwas Kreativeres (und weniger typografisch Typisches) wie Rotation umfassen.
Beide Achsentypen müssen als vierstelliges Tag ausgedrückt werden. Registrierte Achsen müssen klein geschrieben sein, während benutzerdefinierte Achsen in Großbuchstaben geschrieben sind. Beide können in der Eigenschaft Schriftartenvariationseinstellungen kombiniert werden. Die Einstellungen für Schriftvariationen sind animierbar, was einige sehr coole UI-Effekte ermöglichen kann! Einige sehr interessante Experimente wurden auch mit Symbolschriftarten erstellt.
05. Grafische Effekte
Wenn Sie mit Designwerkzeugen wie Photoshop und Illustrator vertraut sind, kennen Sie möglicherweise die Mischmodi und wissen, wie sie verwendet werden können, um unterschiedliche Effekte auf Bilder zu erzielen. Die Art und Weise, wie Mischmodi funktionieren, besteht darin, zwei oder mehr Ebenen mithilfe mathematischer Formeln miteinander zu mischen, um einen resultierenden Wert für jedes Pixel zu berechnen. Die Ebenen können alles sein - Bilder, Verläufe oder flache Farben. Einige Mischmodi erzeugen ein dunkleres Ergebnis (z. B. Multiplizieren, wodurch die Pixelwerte der Ebenen multipliziert werden), andere ein helleres (z. B. Bildschirm und Überlagerung). Wir müssen die Mathematik jedoch nicht verstehen, um sie verwenden zu können. Das Herumspielen mit verschiedenen Mischmodi kann uns ein gutes Gefühl dafür geben, welche davon in Kombination mit verschiedenen Ebenen die gewünschten Ergebnisse erzielen.
Mit den CSS-Eigenschaften Mix-Blend-Modus und Hintergrund-Mischmodus können wir Photoshop-ähnliche Bildeffekte im Browser erzielen. Beide Eigenschaften haben dieselben Werte, funktionieren jedoch geringfügig unterschiedlich.
Hintergrund-Mischmodus
Hintergrund-Mischmodus Überblendet die Hintergrundebenen des Elements, auf das wir abzielen. Unser Element könnte Hintergrundbilder, Farben und Verläufe haben, und sie würden alle miteinander gemischt, ohne den Vordergrundinhalt zu beeinflussen. Wir können mehrere Werte für angeben Hintergrund-Mischmodus eine für jede Hintergrundebene.
.my-element { background: url(#myUrl), linear-gradient(45deg, rgba(65, 68, 244, 1), rgba(203, 66, 244, 0.5)), rgba(244, 65, 106, 1); background-size: cover; background-blend-mode: screen, multiply; }Mix-Blend-Modus
Mix-Blend-Modus Beeinflusst, wie sich das Element mit seinem Elternteil und seinen Geschwistern vermischt, einschließlich aller Vordergrund- und Hintergrundinhalte sowie Pseudoelemente. Einige interessante kreative Effekte können durch Mischen überlagerter Pseudoelemente (:: vor und :: nach) erzielt werden.
.my-element { background: rgb(244, 65, 106); mix-blend-mode: multiply; }CSS-Filter
CSS-Filter können auch verwendet werden, um mit dem Filter Eigenschafts- und Filterfunktionswerte. Im Gegensatz zu Mischmodi wenden sie einen grafischen Effekt direkt auf das Element an, auf das sie abzielen, und auf ein Element können mehrere Filter angewendet werden.
In Graustufen konvertieren
Wir können die Farben eines Elements mit einem höheren Maß an Kontrolle bearbeiten, als wenn wir uns auf Mischmodi verlassen. Filter können ein Bild in Graustufen konvertieren, Helligkeit, Kontrast und Sättigung anpassen, ein Element verwischen oder einen Schlagschatten hinzufügen. Sie können auch animiert werden und sehen mit Hover-Effekten großartig aus.
SVG-Filter
CSS-Filter sind in der Tat vereinfachte Versionen von SVG-Filtern. Das CSS Filter Eigentum nimmt auch ein url () Funktion, mit der wir eine URL an einen SVG-Filter übergeben können. SVG-Filter sind extrem leistungsfähig und ermöglichen einige unglaubliche Bildeffekte - aber sie sind auch weitaus komplizierter als CSS-Filterfunktionen! Sara Soueidan hat eine wunderbare Artikelserie über Codrops, wenn Sie daran interessiert sind, Ihre eigenen benutzerdefinierten SVG-Filter zu codieren. Lesen Sie den Artikel unter https://tympanus.net/codrops/2019/01/15/svg-filters-101/
Ausschneiden und Maskieren: jenseits von Rechtecken
Wir sind es gewohnt, mit Boxen im Web umzugehen, aber nicht alles muss rechteckig sein! Ausschneiden und Maskieren sind zwei Seiten derselben Medaille und bieten verschiedene Möglichkeiten, verschiedene Teile eines Elements auszublenden und anzuzeigen, sodass der Hintergrund durchscheint. Dies gibt uns die Möglichkeit, interessante und kreative Formen in unsere Designs einzuführen.
Clip-Pfad
Das Clip-Pfad () Mit der Eigenschaft können wir ein Element durch Definieren eines Pfads „ausschneiden“. Es erfordert eine Reihe grundlegender Formfunktionen, Einschub (), Kreis (), Ellipse () oder Polygon () Dies ermöglicht es uns, komplexere Ausschnittformen mit Paaren von xy-Koordinaten zu erstellen, um den Pfad zu definieren. Alternativ können wir auch einen SVG-Pfad mit dem übergeben Pfad() Funktion oder mit url () um eine SVG-Pfad-ID bereitzustellen.
Nicht innerhalb des Pfades
Durch das Ausschneiden eines Elements wird alles außerhalb des von Ihnen definierten Pfads abgeschnitten, aber das Element selbst ist immer noch ein Rechteck. Wenn Sie Inhalte haben, die sich über die Grenze des Clip-Pfads hinaus erstrecken, wird auch dieser abgeschnitten - er wird nicht in die Form eingeschlossen.
Maskenbild
Maskenbild ermöglicht es uns, Teile des Bildes ein- und auszublenden, indem wir ein Bild (SVG oder transparentes PNG) oder einen Farbverlauf als Maske verwenden. nicht wie Clip-Pfad können wir unseren Bildern mit Maskierung Textur hinzufügen, da die Maskenquelle kein Pfad sein muss - dies ermöglicht Transparenzgrade.
06. CSS-Formen
Die CSS Shapes-Spezifikation ermöglicht es uns, Text um schwebende geometrische Formen zu wickeln und so einige interessante, magazinartige Layouts zu erstellen. Möglich wird dies durch die Form außen Eigentum. Ähnlich zu Clip-Pfad können wir dieser Eigenschaft eine grundlegende Formfunktion geben Kreis (), Ellipse (), Einschub (), Polygon () oder eine URL zu einem SVG-Pfad, und tatsächlich arbeiten die beiden sehr gut in Harmonie! Form außen wird unseren Text effektiv umbrechen, hat jedoch keine Auswirkungen auf das schwebende Element. Wenn der Text so aussehen soll, als würde er das Bild oder das schwebende Objekt umschließen, können wir denselben Wert für verwenden Clip-Pfad . Benutzen Formrand um Leerzeichen zwischen dem Formpfad und dem ihn umgebenden Inhalt hinzuzufügen. Schauen Sie sich das an Zeug & Unsinn Website, um zu sehen, wie CSS-Formen verwendet werden, um Text um ein zentrales Bild zu wickeln.
Firefox hat eine Formpfad-Editor innerhalb des Dev Tools Panels, das besonders nützlich ist, um mit komplexen Formen zu arbeiten. Seien Sie jedoch mit Vorsicht. Das Umschließen der Vorderkante eines Textabschnitts eignet sich hervorragend für künstlerische Effekte, ist jedoch nicht immer für die Benutzererfahrung geeignet. Komplexe gezackte Formen können das Lesen von Textblöcken erschweren. Für wichtige Inhalte möchten Sie möglicherweise klar steuern.
07. Scroll-Schnappschuss
Viele Websites nutzen JavaScript-Bibliotheken, um eine raffinierte, native App-ähnliche Bildlauferfahrung zu bieten, bei der Inhalte beim Scrollen des Benutzers an Punkten „einrasten“. Mit der Scroll Snap-Spezifikation können wir dies jetzt direkt in unserer CSS-Datei tun - es ist kaum erforderlich, schwere JS-Module zu importieren, um Ihre Seite aufzublähen!
Um das Scroll-Snapping zu implementieren, benötigen wir ein Element, das als Scroll-Container fungiert. Die direkten untergeordneten Elemente des Containers bestimmen die Punkte, an denen gefangen werden soll, und können auf verschiedene Weise innerhalb des Fangbereichs ausgerichtet werden.
Scroll-Snapping kann in Kombination mit einem anderen neuen CSS-Eigenschaftswert noch effektiver sein - Position: klebrig . Dieser Positionswert „klebt“ ein Element beim Scrollen innerhalb seines Containers an eine bestimmte Position - ein weiteres Verhalten, das bisher nur mit JavaScript möglich war. Schauen Sie sich diesen Scroll-Schnappschuss mit Position an: Beispiel für Sticky und IntersectionObserver .
08. CSS-Raster und Layouts
Front-End-Entwickler haben das Layout mit den damals verfügbaren Tools gehackt - zuletzt mit der Flexbox, die viele moderne Grid-Systeme verwenden. Die Flexbox wurde jedoch nie für den Aufbau strenger Gitter entwickelt - ihr Zweck ist Flexibilität!
CSS Grid ist die erste Spezifikation, die für ein zweidimensionales Layout entwickelt wurde. Dadurch können wir die Erstellung eines Layouts und das Platzieren von Elementen sowohl auf der Zeilen- als auch auf der Spaltenachse vollständig steuern. Das Erstellen eines reaktionsschnellen Layouts mit Grid erfordert weder calc () noch das Hacken mit negativen Rändern. Die Geheimwaffe ist die fr-Einheit - eine neue Einheit, die exklusiv für das Gitter erhältlich ist. Die Fr-Einheitsgröße Rasterspuren (Zeilen und Spalten) als Anteil des verfügbaren Speicherplatzes. Es berücksichtigt alle festen Spuren, Dachrinnen und Inhalte und verteilt dann den verbleibenden Platz entsprechend. Jen Simmons prägte den Begriff „Intrinsic Web Design“, um die neue Ära des Weblayouts zu beschreiben, die Grid einleitet.
Verwendung von CSS Grid
Für das Raster ist ein Element erforderlich, dessen Anzeigeeigenschaftswert auf Raster festgelegt ist, um als Rastercontainer zu fungieren. Die direkten untergeordneten Elemente des Rastercontainers sind die Elemente, die im Raster platziert werden können. Wir nutzen die Eigenschaften Raster-Vorlagen-Zeilen und Gitter-Vorlagen-Spalten um die Spuren (Zeilen und Spalten) des Gitters zu definieren, und Spaltenlücke und Reihenlücke um die Dachrinnen (die Lücken zwischen den Gleisen) zu definieren.
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; }Wir verwenden die wiederholen() Funktion, um den Code als Alternative zur Langschrift (z. Raster-Vorlagen-Spalten: 1fr 1fr 1fr 1fr ). In diesem Beispiel wird auch die Kurzform verwendet Spalt zum Reihenlücke und Spaltenlücke .
Der obige Code gibt uns vier Zeilenspuren mit einer Höhe von jeweils 100 Pixel und vier Spaltenspuren, die jeweils einen gleichen Anteil des verfügbaren Speicherplatzes mit der Einheit fr ausfüllen.
Es ist erwähnenswert, dass dies nicht die einzige Möglichkeit ist, Rasterspuren zu erstellen. Implizite Spuren können auch durch Platzieren von Rasterelementen erstellt werden. Wenn Sie Grid verwenden, ist es hilfreich, sich ein wenig darüber zu informieren, da es sich lohnt, ein tieferes Verständnis des Verhaltens von Grid unter verschiedenen Bedingungen zu erlangen und das Codieren eines Layouts erheblich zu vereinfachen.
Wir können Elemente im Raster platzieren, indem wir auf Rasterliniennummern verweisen, bei denen es sich um numerische Linien handelt, die zwischen den einzelnen Spuren liegen. Hier verwenden wir die Kurzform Gitter-Spalte und Gitterreihe zum Gitter-Spalten-Start , Gitter-Spaltenende , Gitterreihenstart und Gitterreihenende . Diese teilen dem Browser mit, in welcher Zeile unser Artikel auf jeder Achse beginnen und enden soll.
.item { grid-column: 1 / 4; grid-row: 2; }Das Raster bietet uns viele verschiedene Möglichkeiten, Elemente zu platzieren: Wir könnten stattdessen unsere Rasterlinien benennen:
.grid { display: grid; grid-template-columns: [image-start] 1fr 1fr 1fr [image-start] 1fr; grid-template-rows: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }Alternativ kann die Raster-Vorlagenbereich Mit der Eigenschaft können wir ein Rasterlayout mit Text „zeichnen“.
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; grid-template-areas: ‘. . . .’ ‘image image image .’ ‘image image image .’ ‘. . . .’; }Mit einer dieser Methoden können wir beim Platzieren eines Rasterelements einfach auf den entsprechenden Rasterbereich verweisen:
.image { grid-area: image; }Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Kaufen Sie jetzt die Ausgabe 290.
