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. Im Gespräch oben und in diesem nachfolgenden Beitrag werden zehn leistungsstarke CSS-Zeilen untersucht, die einige anspruchsvolle Aufgaben erleichtern.
Wenn du dir diese Demos ansehen oder selbst ausprobieren möchtest, sieh dir oben die eingebettete Glitch-Funktion an oder gehe zu 1linelayouts.glitch.me.
01. Super zentriert: place-items: center
Beim ersten „einzeiligen“ Layout möchten wir das größte Rätsel im CSS-Bereich lösen: das Zentrieren. Mit place-items: center ist es einfacher, als Sie denken.
Geben Sie zuerst grid als display-Methode an und schreiben Sie dann place-items: center für dasselbe Element. Mit place-items können Sie align-items und justify-items gleichzeitig festlegen. 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 seiner eigentlichen Größe perfekt innerhalb des übergeordneten Elements zentriert werden.
02. Der zerlegte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes kommt der zerlegte Pfannkuchen. Dies ist beispielsweise ein gängiges Layout für Marketing-Websites, das eine Reihe mit drei Elementen umfassen kann, in der Regel mit einem Bild, einem Titel und dann einem Text, der einige Eigenschaften eines Produkts beschreibt. Auf Mobilgeräten sollen diese gut gestapelt und mit zunehmender Bildschirmgröße erweitert werden.
Wenn Sie die Flexbox für diesen Effekt verwenden, benötigen Sie keine Medienabfragen, um die Platzierung dieser Elemente bei einer Bildschirmgröße anzupassen.
Die Abkürzung flex steht für flex: <flex-grow> <flex-shrink> <flex-basis>.
Wenn Sie möchten, dass Ihre Felder auf die Größe <flex-basis> ausgefüllt werden, sollten Sie sie daher bei kleineren Größen verkleinern, aber nicht dehnen, um zusätzlichen Platz zu füllen. Schreiben Sie daher Folgendes: 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 Sie möchten, dass die Felder gedehnt werden und die Fläche ausfüllen, wenn sie zur nächsten Zeile gehen, setzen Sie <flex-grow> auf 1, sodass das Ergebnis wie folgt aussehen würde:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Wenn Sie jetzt die Bildschirmgröße erhöhen oder verringern, werden diese flexiblen Elemente sowohl verkleinert als auch größer.
03. In der Seitenleiste steht: grid-template-columns: minmax(<min>, <max>) …)
In dieser Demo wird die minmax-Funktion für Rasterlayouts genutzt. 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% der horizontalen Fläche der übergeordneten Ebene ein, bis 25% kleiner als 150px wird.
Fügen Sie dies als Wert der Rastervorlage-Spalten mit dem folgenden Wert hinzu: minmax(150px, 25%) 1fr. Das Element in der ersten Spalte (in diesem Fall die Seitenleiste) erhält unter 25% den Wert 150px für minmax. Das zweite Element (hier der Bereich main) belegt den Rest des Bereichs als einzelnen 1fr-Track.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pfannkuchenstapel: grid-template-rows: auto 1fr auto
Im Gegensatz zu Deconstructed Pancake werden in diesem Beispiel die untergeordneten Elemente nicht umschlossen, wenn sich die Bildschirmgröße ändert. Dieses Layout, das häufig als fixierte Fußzeile bezeichnet wird, wird häufig sowohl für Websites als auch für Apps, für mobile Anwendungen (die Fußzeile ist in der Regel eine Symbolleiste) und für Websites verwendet. Einseitige 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 mit der Fußzeile darunter.
Damit die Fußzeile unten angezeigt wird, fügen Sie Folgendes hinzu:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dadurch wird der Inhalt der Kopf- und Fußzeile so festgelegt, dass automatisch die Größe der untergeordneten Elemente übernommen wird. Der verbleibende Platz (1fr) wird auf den Hauptbereich angewendet, während die Zeile auto die Größe des Mindestinhalts der untergeordneten Elemente übernimmt. Wenn der Inhalt also größer wird, passt sich auch die Zeile selbst an.
05. Klassisches „Heiliger Gral“-Layout: grid-template: auto 1fr auto / auto 1fr auto
Bei diesem klassischen Layout des heiligen Gral gibt es eine Kopfzeile, eine Fußzeile, eine linke Seitenleiste, eine rechte Seitenleiste und einen Hauptinhalt. Es ähnelt dem vorherigen Layout, nur jetzt mit Seitenleisten!
Wenn Sie das gesamte Raster mit einer einzigen Codezeile schreiben möchten, verwenden Sie das Attribut grid-template. So können Sie 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 Umbruch 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. In diesem Fall ist es jedoch horizontal (Breite) statt vertikal (Höhe).
06. 12-Span-Raster: grid-template-columns: repeat(12, 1fr)
Als Nächstes haben wir einen weiteren Klassiker: 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 Track-Raster mit 12 Spalten. Wir können unsere untergeordneten Elemente im Raster platzieren. Eine Möglichkeit besteht darin, sie mithilfe von Rasterlinien zu platzieren. grid-column: 1 / 13 würde sich beispielsweise von der ersten bis zur letzten Zeile (13.) erstrecken und 12 Spalten umfassen. 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 Anfangslinie und die Anzahl der Spalten fest, in die sich ab diesem Startpunkt erstrecken soll. 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 repeat, auto-(fit|fill) und minmax()'. Sie erinnern sich an das Akronym RAM.
Alles in allem sieht das so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden Wiederholung, aber dieses Mal das Schlüsselwort auto-fit anstelle eines expliziten numerischen Werts. Dies ermöglicht die automatische Platzierung dieser untergeordneten Elemente. 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 dies jedoch in auto-fill ändern, werden sie 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
Für das nächste Layout ist der Hauptpunkt justify-content: space-between. Dabei werden das erste und das letzte untergeordnete Element an den Rändern des Begrenzungsrahmens platziert, wobei der verbleibende Platz gleichmäßig auf die Elemente verteilt ist. Diese Karten werden in einem 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. Mit justify-content: space-between werden dann das erste Element (Titel) und das letzte Element (Bildblock) an den Rändern der Flexbox verankert. Der beschreibende Text dazwischen wird mit dem gleichen Abstand zu jedem Endpunkt platziert.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Einschränkung bei meinem Stil: clamp(<min>, <actual>, <max>)
Hier erfahren Sie mehr über Techniken mit weniger Browserunterstützung, aber es gibt einige sehr interessante Auswirkungen auf Layouts und das responsive UI-Design. 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 hier beträgt 23ch oder 23 Zeichen, die maximale Größe beträgt 46ch und 46 Zeichen. Die Zeichenbreite basiert auf der Schriftgröße des Elements, insbesondere der Breite des Symbols 0. Die tatsächliche Größe beträgt 50%, was 50% der übergeordneten Breite dieses Elements entspricht.
Mit der clamp()-Funktion kann dieses Element eine Breite von 50% beibehalten, bis 50% entweder größer als 46ch (bei breiteren Darstellungsbereichen) oder kleiner als 23ch (bei kleineren Darstellungsbereichen) ist. Wenn ich die übergeordnete Größe dehne und verkleinere, wird die Breite dieser Karte auf den Grenzwert an den Mindestpunkt angehoben. Sie bleibt dann im übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um es zu zentrieren. Dadurch wird die Lesbarkeit der Layouts verbessert, da der Text weder zu breit (über 46ch) noch zu gedrängt und schmal ist (weniger als 23ch).
Dies ist auch eine gute Möglichkeit, eine responsive Typografie zu implementieren. Beispiel: font-size: clamp(1.5rem, 20vw, 3rem). In diesem Fall bleibt die Schriftgröße eines Anzeigentitels immer auf einen Wert zwischen 1.5rem und 3rem festgelegt, wird jedoch basierend auf dem tatsächlichen Wert von 20vw an die Breite des Darstellungsbereichs angepasst.
Diese Methode eignet sich hervorragend, um die Lesbarkeit mit einem Mindest- und Höchstwert zu gewährleisten. Denken Sie jedoch daran, dass sie nicht von allen modernen Browsern unterstützt wird. Stellen Sie also sicher, dass Sie Fallbacks haben, und führen Sie die Tests durch.
10. Aspekt respektiert: aspect-ratio: <width> / <height>
Und zu guter Letzt ist das letzte Layout-Tool das experimentellste von allen. Sie wurde vor Kurzem in Chromium 84 mit Chrome Canary eingeführt und arbeitet bereits an der Implementierung von Firefox. Derzeit gibt es jedoch keine stabile Browserversion.
Ich möchte dies jedoch erwähnen, da es ein so häufig auftretendes Problem ist. Dabei wird einfach das Seitenverhältnis eines Bildes beibehalten.
Wenn ich mit der Eigenschaft aspect-ratio die Größe der Karte ändere, behält der grüne visuelle Block dieses 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, musst du einen padding-top-Hack verwenden und ihm einen Abstand von 56.25% zuweisen, um ein Verhältnis von oben zu Breite festzulegen. Wir werden bald eine Eigenschaft dafür haben, um den Hack zu vermeiden und den Prozentsatz zu berechnen. Sie können ein Quadrat mit einem Seitenverhältnis von 1 / 1, ein Seitenverhältnis von 2:1 mit 2 / 1 und wirklich alles erstellen, was Sie benötigen, um dieses Bild mit einem festgelegten Größenverhältnis zu skalieren.
.square {
aspect-ratio: 1 / 1;
}
Diese Funktion ist zwar noch in Entwicklung, doch sie ist eine gute Sache, da sie viele der Probleme von Entwicklern löst, mit denen ich selbst schon oft konfrontiert wurde, insbesondere in Bezug auf Videos und iFrames.
Fazit
Vielen Dank, dass Sie die zehn leistungsstarken CSS-Zeilen kennengelernt haben. Weitere Informationen erhalten Sie im vollständigen Video und in den Demos selbst.