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 Tastendrücken wirklich aussagekräftige und robuste Stilregeln schreiben. In der obigen Präsentation und in diesem nachfolgenden Beitrag werden zehn leistungsstarke Zeilen CSS untersucht, die eine Menge Arbeit erledigen.
Wenn Sie diese Demos selbst ausprobieren möchten, sehen Sie sich das Glitch-Embed oben an oder rufen Sie 1linelayouts.glitch.me auf.
01. Superzentriert: place-items: center
Für das erste Layout mit einer Zeile lösen wir das größte Rätsel in der Welt von CSS: 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, mit der sowohl align-items als auch justify-items gleichzeitig festgelegt werden. Wenn Sie es auf center festlegen, werden sowohl align-items als auch justify-items auf center gesetzt.
.parent {
display: grid;
place-items: center;
}
So können die Inhalte unabhängig von ihrer ursprünglichen Größe perfekt im übergeordneten Element zentriert werden.
02. Der dekonstruierte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes kommt der dekonstruierte Pfannkuchen. Dies ist ein gängiges Layout für Marketing-Websites, die beispielsweise eine Zeile mit drei Elementen haben können, in der sich normalerweise ein Bild, ein Titel und dann ein Text mit einigen Funktionen eines Produkts befinden. Auf Mobilgeräten sollten sie sich gut stapeln und mit zunehmender Bildschirmgröße maximiert werden.
Wenn Sie Flexbox für diesen Effekt verwenden, sind keine Media-Queries erforderlich, um die Platzierung dieser Elemente bei einer Änderung der Bildschirmgröße anzupassen.
Die Kurzschreibweise flex steht für flex: <flex-grow> <flex-shrink> <flex-basis>.
Wenn Sie möchten, dass Ihre Felder die Größe <flex-basis> haben, bei kleineren Größen schrumpfen, sich aber nicht dehnen, um zusätzlichen Platz auszufüllen, schreiben Sie: flex: 0 1 <flex-basis>. In diesem Fall ist Ihre <flex-basis> 150px. Die Formel sieht dann so aus:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Wenn die Felder sich beim Umbruch in die nächste Zeile dehnen und den gesamten verfügbaren Platz ausfüllen sollen, setzen Sie <flex-grow> auf 1. Das Ergebnis sieht dann so aus:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Wenn Sie die Bildschirmgröße jetzt vergrößern oder verkleinern, werden diese Flex-Elemente verkleinert und vergrößert.
03. In der Seitenleiste steht: 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, auf größeren Bildschirmen darf sie sich aber auf 25% ausdehnen. Die Seitenleiste belegt immer 25% des horizontalen Bereichs des übergeordneten Elements, bis dieser 25% kleiner als 150px wird.
Fügen Sie dies als Wert für „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 bei 25% eine minmax von 150px und das zweite Element (hier der Bereich main) nimmt den Rest des Bereichs als einzelnen 1fr-Track ein.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake-Stack: grid-template-rows: auto 1fr auto
Im Gegensatz zum Beispiel „Dekonstruierter Pfannkuchen“ werden die untergeordneten Elemente in diesem Beispiel nicht umgebrochen, wenn sich die Bildschirmgröße ändert. Dieses Layout wird häufig als fixierte Fußzeile bezeichnet und sowohl für Websites als auch für Apps verwendet, z. B. in mobilen Apps (die Fußzeile ist in der Regel eine Symbolleiste) und auf Websites (dieses globale Layout wird häufig in Single-Page-Anwendungen verwendet).
Wenn Sie der Komponente display: grid hinzufügen, erhalten Sie ein Raster mit einer Spalte. Der Hauptbereich ist jedoch nur so hoch wie die Inhalte mit der Fußzeile darunter.
Wenn die Fußzeile unten bleiben soll, fügen Sie Folgendes hinzu:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dadurch wird festgelegt, dass der Inhalt der Kopf- und Fußzeile automatisch die Größe der untergeordneten Elemente annimmt, und der verbleibende Platz (1fr) wird auf den Hauptbereich angewendet. Die Zeile mit der Größe auto nimmt die Größe des Mindestinhalts ihrer untergeordneten Elemente an. Wenn sich dieser Inhalt vergrößert, wird die Zeile entsprechend angepasst.
05. Klassisches „Holy Grail“-Layout: grid-template: auto 1fr auto / auto 1fr auto
Dieses klassische Layout besteht aus einer Kopf- und Fußzeile, einer linken und rechten Seitenleiste sowie dem Hauptinhalt. Es ähnelt dem vorherigen Layout, hat aber jetzt Seitenleisten.
Wenn Sie dieses gesamte Raster mit einer einzigen Codezeile schreiben möchten, verwenden Sie die Eigenschaft grid-template. So können Sie sowohl Zeilen als auch Spalten gleichzeitig festlegen.
Das Attribut/Wert-Paar lautet grid-template: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und der zweiten durch Leerzeichen getrennten Liste ist die Trennlinie 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 skalierte Inhalte hatten, werden hier die linke und rechte Seitenleiste automatisch anhand der Größe ihrer untergeordneten Elemente skaliert. 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 folgt ein weiterer Klassiker: das 12-Spalten-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-Spalten-Spur-Raster. Wir können unsere untergeordneten Elemente in das Raster einfügen. Eine Möglichkeit dazu besteht darin, sie anhand von Rasterlinien zu platzieren. grid-column: 1 / 13 würde beispielsweise von der ersten bis zur letzten (13. Zeile) und über 12 Spalten hinweg reichen. grid-column: 1 / 5; würde die ersten vier umfassen.
Eine andere Möglichkeit ist die Verwendung des Schlüsselworts span. Mit span legen Sie die Startzeile und dann die Anzahl der Spalten fest, die ab diesem Startpunkt belegt werden sollen. In diesem Fall würde grid-column: 1 / span 12 der grid-column: 1 / 13 und grid-column: 2 / span 6 der grid-column: 2 / 8 entsprechen.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Wiederholen, Automatisch, 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 cool. Die wichtigsten Begriffe sind hier repeat, auto-(fit|fill) und minmax()', die Sie sich durch das Akronym RAM merken können.
Zusammenfassend sieht das so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden noch einmal das Schlüsselwort „repeat“, diesmal aber das Schlüsselwort auto-fit anstelle eines expliziten numerischen Werts. Dadurch wird das automatische Platzieren dieser untergeordneten Elemente ermöglicht. Diese untergeordneten Elemente haben auch einen Basismindestwert von 150px mit einem Maximalwert von 1fr. Auf kleineren Bildschirmen nehmen sie also die volle Breite von 1fr ein. Wenn sie jeweils eine Breite von 150px erreichen, werden sie in dieselbe Zeile verschoben.
Bei auto-fit werden die Felder gedehnt, wenn ihre horizontale Größe 150 Pixel überschreitet, um den gesamten verbleibenden Bereich 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 vor allem um justify-content: space-between, mit dem die ersten und letzten untergeordneten Elemente an den Rändern ihres Begrenzungsrahmens platziert werden und der verbleibende Platz gleichmäßig auf die Elemente verteilt wird. Diese Karten werden im Flexbox-Anzeigemodus platziert, wobei die Ausrichtung mit flex-direction: column auf „Spalte“ festgelegt wird.
Dadurch werden der Titel, die Beschreibung und der Bildblock in einer vertikalen Spalte in der übergeordneten Karte angezeigt. Wenn Sie dann justify-content: space-between anwenden, werden das erste (Titel) und das letzte (Bildblock) Element an den Rändern des Flexbox verankert. Der beschreibende Text dazwischen wird mit gleichem Abstand zu jedem Endpunkt platziert.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Hier geht es um einige Techniken, die weniger Browserunterstützung haben, aber sehr interessante Auswirkungen auf Layouts und responsives UI-Design haben. In dieser Demo legen Sie die Breite mithilfe von „clamp“ fest: width: clamp(<min>, <actual>, <max>).
Dadurch werden eine absolute Mindest- und Höchstgröße sowie eine tatsächliche Größe festgelegt. Bei Werten kann das so aussehen:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Die Mindestgröße beträgt hier 23ch oder 23 Zeicheneinheiten und die maximale Größe 46ch, also 46 Zeichen. Einheiten für die Zeichenbreite basieren auf der Schriftgröße des Elements, insbesondere auf der Breite des 0-Glyphens. 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 (in breiteren Darstellungsbereichen) oder kleiner als 23ch (in kleineren Darstellungsbereichen) ist. Sie sehen, dass sich die Breite dieser Karte beim Strecken und Schrumpfen des übergeordneten Elements bis zum maximal zulässigen Wert vergrößert und bis zum minimal zulässigen Wert verkleinert. Es bleibt dann im übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um es zu zentrieren. So sind lesbarere Layouts möglich, da der Text nicht zu breit (über 46ch) oder zu eng und schmal (unter 23ch) ist.
Dies 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 bleibt die Schriftgröße eines Titels immer zwischen 1.5rem und 3rem, wird aber je nach dem tatsächlichen Wert von 20vw vergrößert oder verkleinert, um der Breite des Darstellungsbereichs zu entsprechen.
Dies ist eine gute Methode, um mit einem Mindest- und Höchstwert für die Größe für Lesbarkeit zu sorgen. Denken Sie aber daran, dass diese Funktion nicht in allen modernen Browsern unterstützt wird. Achten Sie also darauf, dass Sie Fallbacks haben und Ihre Tests durchführen.
10. Seitenverhältnis: aspect-ratio: <width> / <height>
Dieses letzte Layout-Tool ist das experimentellste. Sie wurde vor Kurzem in Chrome Canary in Chromium 84 eingeführt und Firefox arbeitet aktiv an der Implementierung. Sie ist derzeit jedoch in keiner stabilen Browserversion verfügbar.
Ich möchte das aber erwähnen, weil es ein häufiges Problem ist. Das bedeutet einfach, das Seitenverhältnis eines Bildes beizubehalten.
Mit der Property aspect-ratio behält der grüne visuelle Block das Seitenverhältnis 16:9 bei, wenn ich die Größe der Karte ändere. Wir respektieren das Seitenverhältnis mit aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Wenn du ohne dieses Attribut ein Seitenverhältnis von 16:9 beibehalten möchtest, musst du einen padding-top-Hack verwenden und ein 56.25%-Abstand für das Verhältnis zwischen Höhe und Breite festlegen. Demnächst wird es ein Attribut dafür geben, um den Hack zu vermeiden und den Prozentsatz nicht mehr berechnen zu müssen. Sie können ein Quadrat mit dem Seitenverhältnis 1 / 1, ein Seitenverhältnis von 2:1 mit 2 / 1 oder einfach alles andere erstellen, was Sie für dieses Bild benötigen, um es mit einem festgelegten Größenverhältnis zu skalieren.
.square {
aspect-ratio: 1 / 1;
}
Diese Funktion ist noch relativ neu, aber es lohnt sich, sie zu kennen, da sie viele Probleme von Entwicklern löst, mit denen ich selbst oft konfrontiert war, insbesondere bei Videos und iframes.
Fazit
Vielen Dank, dass Sie uns auf diesem Weg durch zehn leistungsstarke Zeilen CSS begleitet haben. Sehen Sie sich das vollständige Video an und testen Sie die Demos selbst.