In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, mit denen Sie anspruchsvolle, moderne Layouts erstellen können.
Mit modernen CSS-Layouts können Entwickler mit nur wenigen Tastenanschlägen wirklich aussagekräftige und robuste Stilregeln erstellen. 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 zerlegte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes kommt der zerlegte 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-Abfragen erforderlich, um die Platzierung dieser Elemente bei einer Größenänderung des Bildschirms 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 zu füllen, schreiben Sie: flex: 0 1 <flex-basis>. In diesem Fall ist Ihre <flex-basis> 150px, sodass sie so aussieht:
.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 kann diese Größe jedoch 25% betragen. Die Seitenleiste nimmt immer 25% des horizontalen Bereichs der übergeordneten Ebene ein, bis 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. Pfannkuchenstapel: 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 die Kopf- und Fußzeilen automatisch die Größe ihrer untergeordneten Elemente annehmen. 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 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 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 Größe der Kopf- und Fußzeile automatisch angepasst wurde, werden hier die linke und rechte Seitenleiste automatisch an die jeweilige Größe der Kinder angepasst. Diesmal geht es jedoch um die horizontale Größe (Breite) anstelle der vertikalen (Höhe).
06. 12-Span-Raster: 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 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))
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 außerdem einen Basismindestwert von 150px mit einem Höchstwert von 1fr. Das bedeutet, dass sie auf kleineren Bildschirmen die volle 1fr-Breite einnehmen. Wenn sie jeweils eine Breite von 150px erreichen, fließen sie auf dieselbe Zeile.
Mit auto-fit werden die Felder gestreckt, wenn ihre horizontale Größe 150 Pixel überschreitet, um den gesamten verbleibenden Platz auszufüllen. Wenn Sie es jedoch in auto-fill ändern, werden die Spalten nicht erweitert, wenn ihre Basisgröße in der minmax-Funktion überschritten wird:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Aufstellung: 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 mit der Funktion „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 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 Layouts besser lesbar, da der Text nicht zu breit (über 46ch) oder zu eng und schmal (unter 23ch) ist.
Dies ist auch eine gute Möglichkeit, eine 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. Aspekt respektiert: 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. Dabei wird einfach das Seitenverhältnis eines Bildes beibehalten.
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 ein Seitenverhältnis von 16 × 9 ohne diese Eigenschaft beibehalten möchtest, musst du einen padding-top-Hack verwenden und ihm einen Abstand von 56.25% zuweisen, um ein Verhältnis von oben zu Breite festzulegen. 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 ist gut, sie zu kennen, da sie viele Entwicklerprobleme 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.