In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, die viel Arbeit abnehmen und Ihnen helfen, robuste moderne Layouts zu erstellen.
Mit modernen CSS-Layouts können Entwickler mit nur wenigen Tastenanschlägen wirklich aussagekräftige und robuste Formatierungsregeln schreiben. Im obigen Vortrag und in diesem nachfolgenden Beitrag werden 10 leistungsstarke CSS-Zeilen untersucht, die einiges leisten.
Wenn Sie die Demos selbst ausprobieren möchten, können Sie die oben eingebettete Website aufrufen oder 1linelayouts.com besuchen.
01. Super Centered: place-items: center
Für das erste „einzeilige“ Layout wollen wir das größte Mysterium in der Welt des CSS lösen: das Zentrieren von Elementen. Mit place-items: center ist das einfacher, als du denkst.
Geben Sie zuerst grid als display-Methode an und schreiben Sie dann place-items: center in dasselbe Element. place-items ist eine Abkürzung, um sowohl align-items als auch justify-items gleichzeitig festzulegen. Wenn Sie den Wert auf center festlegen, werden sowohl align-items als auch justify-items auf center festgelegt.
.parent {
display: grid;
place-items: center;
}
So kann der Inhalt unabhängig von seiner intrinsischen Größe perfekt im übergeordneten Element zentriert werden.
02. Der dekonstruierte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes haben wir den dekonstruierten Pfannkuchen. Dies ist ein gängiges Layout für Marketingwebsites, die beispielsweise eine Zeile mit drei Elementen haben können, in der Regel mit einem Bild, einem Titel und dann etwas Text, der einige Funktionen eines Produkts beschreibt. Auf Mobilgeräten sollen sie sich gut stapeln lassen und sich mit zunehmender Bildschirmgröße ausdehnen.
Wenn Sie Flexbox für diesen Effekt verwenden, sind keine Media-Queries erforderlich, um die Platzierung dieser Elemente anzupassen, wenn sich die Bildschirmgröße ändert.
Die Kurzschreibweise flex steht für: flex: <flex-grow> <flex-shrink> <flex-basis>.
Wenn Sie möchten, dass die Felder die Größe <flex-basis> haben, bei kleineren Größen verkleinert werden, aber nicht gedehnt werden, um zusätzlichen Platz zu füllen, schreiben Sie: flex: 0 1 <flex-basis>. In diesem Fall ist <flex-basis> 150px. Der Ausdruck sieht also so aus:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Wenn Sie möchten, dass sich die Kästen dehnen und den Platz ausfüllen, wenn sie in die nächste Zeile umgebrochen werden, setzen Sie <flex-grow> auf 1. Das sieht dann so aus:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Wenn Sie die Bildschirmgröße vergrößern oder verkleinern, werden diese Flex-Elemente sowohl verkleinert als auch vergrößert.
03. Seitenleiste: grid-template-columns: minmax(<min>, <max>) …)
In dieser Demo wird die Funktion minmax für Rasterlayouts verwendet. Hier legen wir die Mindestgröße der Seitenleiste auf 150px fest, lassen sie aber auf größeren Bildschirmen auf 25% anwachsen. Die Seitenleiste nimmt immer 25% des horizontalen Bereichs des übergeordneten Elements ein, bis dieser Wert kleiner als 150px wird.25%
Fügen Sie dies als Wert von „grid-template-columns“ mit dem folgenden Wert hinzu:
minmax(150px, 25%) 1fr. Das Element in der ersten Spalte (in diesem Fall die Seitenleiste) erhält eine minmax von 150px bei 25%, und das zweite Element (hier der 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 Beispiel „Deconstructed Pancake“ werden die untergeordneten Elemente in diesem Beispiel nicht umgebrochen, wenn sich die Bildschirmgröße ändert. Dieses Layout, das häufig als fixierter Footer bezeichnet wird, wird oft sowohl für Websites als auch für Apps verwendet, in mobilen Anwendungen (der Footer ist in der Regel eine Symbolleiste) und auf Websites (Single-Page-Anwendungen verwenden häufig dieses globale Layout).
Wenn Sie der Komponente display: grid hinzufügen, erhalten Sie ein einspaltiges Raster. Der Hauptbereich ist jedoch nur so hoch wie der Inhalt und die Fußzeile befindet sich darunter.
Damit die Fußzeile unten fixiert wird, fügen Sie Folgendes hinzu:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dadurch wird die Größe von Kopf- und Fußzeileninhalten automatisch an die Größe der untergeordneten Elemente angepasst. Der verbleibende Platz (1fr) wird dem Hauptbereich zugewiesen. Die Zeile mit der Größe auto wird an die Mindestgröße der untergeordneten Elemente angepasst. Wenn die Größe der Inhalte zunimmt, wird die Zeile entsprechend vergrößert.
05. Klassisches Holy Grail-Layout: grid-template: auto 1fr auto / auto 1fr auto
Dieses klassische Holy Grail-Layout besteht aus einem Header, einer Fußzeile, einer linken und einer rechten Seitenleiste sowie dem Hauptinhalt. Es ähnelt dem vorherigen Layout, hat aber jetzt Seitenleisten.
Wenn Sie das gesamte Raster mit einer einzigen Codezeile schreiben möchten, verwenden Sie das Attribut grid-template. So können Sie sowohl die Zeilen als auch die Spalten gleichzeitig festlegen.
Das Attribut/Wert-Paar ist: grid-template: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und der zweiten durch Leerzeichen getrennten Liste ist die Trennung zwischen Zeilen und Spalten.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Wie im letzten Beispiel, in dem die Kopf- und Fußzeile automatisch an die Größe des Inhalts angepasst wurden, werden hier die linke und rechte Seitenleiste automatisch an die intrinsische Größe ihrer untergeordneten Elemente angepasst. Diesmal geht es jedoch um die horizontale Größe (Breite) anstelle der vertikalen (Höhe).
06. Raster mit 12 Spalten: grid-template-columns: repeat(12, 1fr)
Als Nächstes haben wir einen weiteren Klassiker: das 12‑spaltige Raster. Mit der Funktion repeat() können Sie schnell Raster in CSS schreiben. Wenn Sie repeat(12, 1fr); für die Spalten der Rastervorlage verwenden, erhalten Sie 12 Spalten mit jeweils 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Jetzt haben Sie ein 12-spaltiges Track-Raster. Wir können die untergeordneten Elemente im Raster platzieren. Eine Möglichkeit hierfür ist, sie mithilfe von Rasterlinien zu platzieren. grid-column: 1 / 13 würde sich beispielsweise von der ersten bis zur letzten (13.) Zeile erstrecken und 12 Spalten umfassen. grid-column: 1 / 5; würde die ersten vier umfassen.
Eine andere Möglichkeit, dies zu schreiben, ist die Verwendung des Schlüsselworts span. Mit span legen Sie die Startzeile und dann die Anzahl der Spalten fest, die ab diesem Startpunkt abgedeckt werden sollen. In diesem Fall wäre grid-column: 1 / span 12 mit grid-column: 1 / 13 und grid-column: 2 / span 6 mit grid-column: 2 / 8 identisch.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
In diesem siebten Beispiel kombinieren Sie einige der Konzepte, die Sie bereits kennengelernt haben, um ein responsives Layout mit automatisch platzierten und flexiblen untergeordneten Elementen zu erstellen. Ziemlich praktisch. Die wichtigsten Begriffe sind repeat, auto-(fit|fill) und minmax()', die Sie sich mit dem Akronym RAM merken können.
Insgesamt sieht das so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden „repeat“ noch einmal, diesmal aber mit dem Schlüsselwort auto-fit anstelle eines expliziten numerischen Werts. Dadurch können diese untergeordneten Elemente automatisch platziert werden. Diese untergeordneten Elemente haben auch einen Mindestbasiswert von 150px mit einem Maximalwert von 1fr. Das bedeutet, dass sie auf kleineren Bildschirmen die volle Breite von 1fr einnehmen und erst dann in dieselbe Zeile fließen, wenn sie jeweils 150px breit sind.
Mit auto-fit werden die Kästen gedehnt, 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 minmax-Funktion überschritten wird:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line-up: justify-content: space-between
Beim nächsten Layout geht es hauptsächlich um justify-content: space-between. Damit werden das erste und das letzte untergeordnete Element an den Rändern des umgebenden Rechtecks platziert. Der verbleibende Platz wird gleichmäßig zwischen den Elementen verteilt. Diese Karten werden im Flexbox-Anzeigemodus platziert, wobei die Richtung mit flex-direction: column auf „column“ (Spalte) festgelegt wird.
Dadurch werden der Titel, die Beschreibung und der Bildblock in einer vertikalen Spalte innerhalb der übergeordneten Karte platziert. Durch die Anwendung von justify-content: space-between werden das erste (Titel) und das letzte Element (Bildblock) an den Rändern des Flexbox-Containers verankert. Der beschreibende Text dazwischen wird mit gleichem Abstand zu den Endpunkten platziert.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Hier kommen einige Techniken ins Spiel, die weniger Browserunterstützung haben, aber wirklich spannende Auswirkungen auf Layouts und responsives UI-Design haben. In dieser Demo legen Sie die Breite mit „clamp“ 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 beträgt 23ch oder 23 Zeicheneinheiten und die maximale Größe 46ch oder 46 Zeichen. Einheiten für die Zeichenbreite basieren auf der Schriftgröße des Elements (insbesondere auf der Breite des Glyphen 0). Die tatsächliche Größe beträgt 50%, was 50% der Breite des übergeordneten Elements entspricht.
Die Funktion clamp() sorgt dafür, dass dieses Element eine Breite von 50% beibehält, bis 50% entweder größer als 46ch (bei breiteren Darstellungsbereichen) oder kleiner als 23ch (bei kleineren Darstellungsbereichen) ist. Wenn ich die Größe des übergeordneten Elements verändere, sehen Sie, dass die Breite dieser Karte auf den geklammerten Maximalwert ansteigt und auf den geklammerten Minimalwert sinkt. Es bleibt dann im übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um es zu zentrieren. So werden lesbarere Layouts ermöglicht, da der Text nicht zu breit (über 46ch) oder zu schmal (unter 23ch) ist.
Das ist auch eine gute Möglichkeit, responsive Typografie zu implementieren. Sie könnten beispielsweise Folgendes eingeben: font-size: clamp(1.5rem, 20vw, 3rem). In diesem Fall würde die Schriftgröße einer Überschrift immer zwischen 1.5rem und 3rem bleiben, aber je nach tatsächlichem Wert von 20vw größer oder kleiner werden, um der Breite des Viewports zu entsprechen.
Das ist eine gute Methode, um die Lesbarkeit mit einem Mindest- und einem Höchstwert für die Schriftgröße zu gewährleisten. Sie wird jedoch nicht von allen modernen Browsern unterstützt. Achten Sie also darauf, dass Sie Fallbacks haben und Tests durchführen.
10. Seitenverhältnis: aspect-ratio: <width> / <height>
Und schließlich ist dieses letzte Layout-Tool das experimentellste von allen. Sie wurde vor Kurzem in Chrome Canary in Chromium 84 eingeführt. Firefox arbeitet aktiv an der Implementierung, aber derzeit ist sie in keiner stabilen Browserversion verfügbar.
Ich möchte es aber erwähnen, da es ein sehr häufiges Problem ist. Dabei wird einfach das Seitenverhältnis eines Bildes beibehalten.
Wenn ich die Karte mit der aspect-ratio-Eigenschaft verkleinere oder vergrößere, behält der grüne visuelle Block dieses Seitenverhältnis von 16 × 9 bei. Das Seitenverhältnis wird mit aspect-ratio: 16 / 9 beibehalten.
.video {
aspect-ratio: 16 / 9;
}
Um ohne dieses Attribut ein Seitenverhältnis von 16 × 9 beizubehalten, müssten Sie einen padding-top-Hack verwenden und ihm ein Padding von 56.25% zuweisen, um ein Verhältnis von oben nach Breite festzulegen. Bald wird es eine Property dafür geben, damit der Hack und die Berechnung des Prozentsatzes nicht mehr erforderlich sind. Sie können ein Quadrat mit einem Seitenverhältnis von 1 / 1, ein Seitenverhältnis von 2:1 mit 2 / 1 und alles andere erstellen, was Sie benötigen, damit dieses Bild mit einem festgelegten Größenverhältnis skaliert wird.
.square {
aspect-ratio: 1 / 1;
}
Diese Funktion ist zwar noch relativ neu, aber es ist gut, sie zu kennen, da sie viele Probleme löst, mit denen ich selbst schon oft zu kämpfen hatte, insbesondere bei Videos und iFrames.
Fazit
Vielen Dank, dass Sie uns auf dieser Reise durch 10 leistungsstarke CSS-Zeilen begleitet haben. Sehen Sie sich das vollständige Video an und probieren Sie die Demos selbst aus.