In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, die Ihnen beim Erstellen robuster, moderner Layouts helfen.
Mit modernen CSS-Layouts können Entwickler mit nur wenigen Tastenanschlägen wirklich aussagekräftige und robuste Stilregeln erstellen. In dem Vortrag oben und im nachfolgenden Beitrag werden zehn leistungsstarke CSS-Zeilen untersucht, die großen Aufwand erfordern.
Wenn Sie diese Demos selbst ausprobieren oder ausprobieren möchten, sehen Sie sich oben die Einbettung von Glitch an oder besuchen Sie 1linelayouts.glitch.me.
01. Stark: place-items: center
Beim ersten „Einzeiligen“-Layout wollen wir das größte Rätsel im gesamten CSS-Land lösen: das Zentrieren der Elemente. Mit place-items: center ist das einfacher, als Sie denken.
Geben Sie zuerst grid als display-Methode an und schreiben Sie dann place-items: center für dasselbe Element. place-items ist ein Kürzel, um align-items und justify-items gleichzeitig festzulegen. Wenn Sie es auf center setzen, werden sowohl align-items als auch justify-items auf center gesetzt.
.parent {
display: grid;
place-items: center;
}
Dadurch kann der Inhalt unabhängig von der intrinsischen Größe perfekt innerhalb des übergeordneten Elements zentriert werden.
02. Der zerlegte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes haben wir den zerlegten Pfannkuchen! Dies ist z. B. ein gängiges Layout für Marketingwebsites, das eine Reihe von drei Elementen enthalten kann, in der Regel mit einem Bild, einem Titel und etwas Text, der einige Funktionen eines Produkts beschreibt. Auf Mobilgeräten sollen sie gut gestapelt und vergrößert werden, wenn der Bildschirm größer wird.
Wenn Sie Flexbox für diesen Effekt verwenden, sind keine Medienabfragen erforderlich, um die Platzierung dieser Elemente anzupassen, wenn sich die Größe des Bildschirms ändert.
Das Kürzel flex steht für flex: <flex-grow> <flex-shrink> <flex-basis>.
Wenn Sie also möchten, dass Ihre Felder bis zur <flex-basis>-Größe ausgefüllt werden, verkleinern Sie sie bei kleineren Größen, aber nicht dehnen, um zusätzlichen Platz zu füllen: flex: 0 1 <flex-basis>. In diesem Fall ist Ihre <flex-basis> 150px. Sie sieht also so aus:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Wenn Sie möchten, dass die Felder gestreckt und die Fläche in der nächsten Zeile ausgefüllt wird, setzen Sie <flex-grow> auf 1, sodass es so aussieht:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Wenn Sie nun die Bildschirmgröße erhöhen oder verringern, werden diese flexiblen Elemente sowohl kleiner als auch größer.
03. In Seitenleiste wird Folgendes angezeigt: grid-template-columns: minmax(<min>, <max>) …)
In dieser Demo wird die Funktion minmax für Rasterlayouts genutzt. Hier legen wir die Mindestgröße der Seitenleiste auf 150px fest, aber auf größeren Bildschirmen wird sie auf 25% erweitert. Die Seitenleiste belegt immer 25% der horizontalen Fläche des übergeordneten Elements, bis 25% kleiner als 150px wird.
Fügen Sie diese als Wert von „raster-template-columns“ mit dem folgenden Wert hinzu: minmax(150px, 25%) 1fr. Das Element in der ersten Spalte (in diesem Fall die Seitenleiste) erhält ein minmax von 150px um 25% und das zweite Element (hier den Abschnitt main) nimmt den Rest des Bereichs als einzelner 1fr-Track ein.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pfannkuchenstapel: grid-template-rows: auto 1fr auto
Im Gegensatz zum dekonstruierten Pancake werden die untergeordneten Elemente in diesem Beispiel nicht umschlossen, wenn sich die Bildschirmgröße ändert. Dieses Layout wird allgemein als fixierte Fußzeile bezeichnet. Es wird häufig sowohl für Websites als auch Apps, für mobile Apps (die Fußzeile ist in der Regel eine Symbolleiste) und Websites (einseitige Anwendungen verwenden oft dieses globale Layout) verwendet.
Wenn Sie display: grid zur Komponente hinzufügen, erhalten Sie ein einspaltiges Raster. Der Hauptbereich ist jedoch nur so hoch wie der Inhalt mit der Fußzeile darunter.
Damit die Fußzeile am unteren Rand fixiert bleibt, fügen Sie Folgendes hinzu:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dadurch wird für den Inhalt der Kopf- und Fußzeile automatisch die Größe der untergeordneten Elemente verwendet und der verbleibende Platz (1fr) wird auf den Hauptbereich angewendet, während die Größe der auto Zeile den Mindestinhalt ihrer untergeordneten Elemente einnimmt. Wenn dieser Inhalt größer wird, wird die Zeile selbst angepasst.
05. Klassisches Holy-Gral-Layout: grid-template: auto 1fr auto / auto 1fr auto
Dieses klassische Holy Gral-Layout umfasst eine Kopfzeile, eine Fußzeile, eine linke Seitenleiste, eine rechte Seitenleiste und einen Hauptinhalt. Es ähnelt dem vorherigen Layout, nur mit Seitenleisten.
Um das gesamte Raster mit einer einzigen Codezeile zu schreiben, verwenden Sie das Attribut grid-template. Auf diese Weise können Sie die Zeilen und Spalten gleichzeitig festlegen.
Das Attribut/Wert-Paar lautet: grid-template: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und zweiten durch Leerzeichen getrennten Liste ist der Abstand zwischen Zeilen und Spalten.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Wie im letzten Beispiel, in dem die Größe der Kopf- und Fußzeile automatisch angepasst wurde, wird auch hier die Größe der linken und rechten Seitenleiste automatisch an die ursprüngliche Größe der Kinder angepasst. Dieses Mal wird es jedoch horizontal (Breite) statt vertikal (Höhe) verwendet.
06. 12-Span-Raster: grid-template-columns: repeat(12, 1fr)
Als Nächstes kommt ein weiterer Klassiker zum Einsatz: das 12-Spann-Raster. Mit der Funktion repeat() können Sie schnell Raster in CSS schreiben. Wenn Sie repeat(12, 1fr); für die Rastervorlagenspalten verwenden, erhalten Sie jeweils 12 Spalten von 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Jetzt haben Sie ein 12-spaltiges Trackraster. Wir können die untergeordneten Elemente auf dem Raster platzieren. Eine Möglichkeit wäre, sie mithilfe von Rasterlinien zu platzieren. So würde sich grid-column: 1 / 13 beispielsweise von der ersten Zeile bis zur letzten (13.) Zeile erstrecken und sich über 12 Spalten erstrecken. grid-column: 1 / 5; würde die ersten vier umfassen.
Alternativ lässt sich dies mit dem Schlüsselwort span schreiben. Mit span legen Sie die Startzeile fest und bestimmen dann, wie viele Spalten von diesem Startpunkt aus abgedeckt werden sollen. In diesem Fall entspricht grid-column: 1 / span 12 grid-column: 1 / 13 und grid-column: 2 / span 6 grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Wiederholen, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Kombinieren Sie für dieses siebte Beispiel einige der Konzepte, die Sie bereits kennengelernt haben, um ein responsives Layout mit automatisch platzierten und flexiblen untergeordneten Elementen zu erstellen. Ziemlich praktisch. Die Schlüsselbegriffe sind hier repeat, auto-(fit|fill) und minmax()', an die Sie sich durch das Akronym RAM erinnern.
Das Ganze sieht dann so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden Wiederholungsversuche noch einmal, diesmal aber mit dem Schlüsselwort auto-fit anstelle eines expliziten numerischen Werts. Dadurch wird die automatische Platzierung dieser untergeordneten Elemente ermöglicht. Diese untergeordneten Elemente haben auch einen Basismindestwert von 150px mit einem Höchstwert 1fr. Das bedeutet, dass sie auf kleineren Bildschirmen die gesamte Breite von 1fr einnehmen und wenn sie jeweils eine Breite von 150px erreichen, beginnen sie, auf dieselbe Linie zu verlaufen.
Mit auto-fit werden die Boxen gestreckt, wenn ihre horizontale Größe 150 Pixel überschreitet, um den gesamten verbleibenden Platz auszufüllen. Wenn Sie dies jedoch in auto-fill ändern, werden sie nicht gedehnt, wenn ihre Basisgröße in der Funktion „minmax“ überschritten wird:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Aufstellen: justify-content: space-between
Im nächsten Layout wird hier der Hauptpunkt justify-content: space-between gezeigt. Dabei werden die ersten und letzten untergeordneten Elemente an den Rändern ihres Begrenzungsrahmens platziert, wobei der verbleibende Abstand gleichmäßig auf die Elemente verteilt ist. Für diese Karten werden sie im Flexbox-Anzeigemodus platziert, wobei die Richtung mithilfe von flex-direction: column auf die Spalte festgelegt wird.
Dadurch werden Titel, Beschreibung und Bildblock in einer vertikalen Spalte innerhalb der übergeordneten Karte platziert. Durch das Anwenden von justify-content: space-between werden dann das erste Element (Titel) und das letzte Element (Bildblock) an den Rändern der Flexbox verankert. Der dazwischen liegende Beschreibungstext wird mit demselben Abstand zu jedem Endpunkt platziert.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Festlegen meines Stils: clamp(<min>, <actual>, <max>)
Hier stellen wir einige Techniken vor, die weniger Browserunterstützung bieten, aber es gibt aufregende Auswirkungen auf Layouts und das responsive UI-Design. In dieser Demo legen Sie die Breite mithilfe der Klammern so fest: width: clamp(<min>, <actual>, <max>).
Damit werden eine absolute Mindest- und Maximalgröße sowie eine tatsächliche Größe festgelegt. Mit Werten kann das so aussehen:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Die Mindestgröße hier beträgt 23ch oder 23 Zeichen und die maximale Größe 46ch und 46 Zeichen. Die Einheiten für die Zeichenbreite basieren auf der Schriftgröße des Elements, insbesondere der Breite des Glyphen 0. Die "tatsächliche" Größe beträgt 50%, was 50% der Breite dieses Elements entspricht.
Die Funktion clamp() sorgt hier dafür, dass dieses Element eine Breite von 50% behält, bis 50% entweder größer als 46ch (bei breiteren Darstellungsbereichen) oder kleiner als 23ch (bei kleineren Darstellungsbereichen) ist. Wenn ich die übergeordnete Karte dehne und verkleinere, erhöht sich die Breite dieser Karte bis auf den halben Rand und nimmt dann ab. Sie bleibt dann im übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um sie zu zentrieren. Dies ermöglicht eine besser lesbare Layouts, da der Text nicht zu breit (über 46ch) und nicht zu gestaucht und schmal (weniger als 23ch) ist.
Dies ist auch eine großartige Möglichkeit, responsive Typografie zu implementieren. Sie könnten beispielsweise Folgendes schreiben: font-size: clamp(1.5rem, 20vw, 3rem). In diesem Fall bleibt die Schriftgröße eines Anzeigentitels zwischen 1.5rem und 3rem begrenzt, wird aber entsprechend dem tatsächlichen Wert von 20vw an die Breite des Darstellungsbereichs angepasst.
Dies ist eine großartige Methode, um die Lesbarkeit mit einem Mindest- und Höchstwert für die Lesbarkeit sicherzustellen. Bedenken Sie jedoch, dass sie nicht von allen modernen Browsern unterstützt wird. Stellen Sie daher sicher, dass Sie Fallbacks haben und testen Sie.
10. Aspekt respektieren: aspect-ratio: <width> / <height>
Und schließlich ist das letzte Layout-Tool das experimentellste. Sie wurde vor Kurzem in Chrome Canary in Chromium 84 eingeführt und es wird derzeit mit großem Einsatz von Firefox daran gearbeitet, sie ist derzeit in keiner stabilen Browserversion verfügbar.
Ich möchte dies jedoch erwähnen, weil es ein so häufig auftretendes Problem ist. Dabei geht es einfach darum, das Seitenverhältnis eines Bildes beizubehalten.
Wenn ich die Größe der Karte mit der Eigenschaft aspect-ratio ändere, behält der grüne visuelle Block das Seitenverhältnis von 16 × 9 bei. Wir respektieren das Seitenverhältnis mit aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Um ein Seitenverhältnis von 16 × 9 ohne diese Eigenschaft beizubehalten, müssen Sie einen padding-top-Hack verwenden und einen Abstand von 56.25% festlegen, um das Verhältnis von oben zur Breite festzulegen. Wir werden bald eine Property dafür haben, um den Hack zu vermeiden, und die Notwendigkeit, den Prozentsatz zu berechnen. Sie können ein Quadrat mit dem Seitenverhältnis 1 / 1, ein Seitenverhältnis von 2:1 mit 2 / 1 und alles, was Sie für die Skalierung dieses Bildes mit einem festgelegten Größenverhältnis benötigen, erstellen.
.square {
aspect-ratio: 1 / 1;
}
Diese Funktion ist zwar noch in Arbeit, aber es lohnt sich, es zu wissen, da es viele Streitigkeiten von Entwicklern beseitigt, mit denen ich oft zu kämpfen habe, insbesondere wenn es um Videos und iFrames geht.
Fazit
Vielen Dank, dass Sie die zehn leistungsstarken CSS-Linien kennengelernt haben. Weitere Informationen finden Sie im vollständigen Video und probieren die Demos selbst aus.