In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, die Ihnen die Arbeit erleichtern und Ihnen helfen, robuste moderne Layouts zu erstellen.
Veröffentlicht: 7. Juli 2020, zuletzt aktualisiert: 15. Dezember 2025
Moderne CSS-Layouts ermöglichen es Entwicklern, mit nur wenigen Tastenanschlägen wirklich aussagekräftige und robuste Stilregeln zu schreiben. In dem Vortrag oben und in diesem Beitrag werden zehn leistungsstarke CSS-Zeilen vorgestellt, die einiges leisten.
Wenn Sie die Demos selbst ausprobieren möchten, sehen Sie sich die oben eingebettete Website an oder rufen Sie 1linelayouts.com auf.
01. Superzentriert: place-items: center
Beim ersten einzeiligen Layout lösen wir das größte Rätsel in der CSS-Welt: das Zentrieren von Elementen. Mit place-items: center ist das einfacher, als Sie vielleicht denken.
Geben Sie zuerst grid als display-Methode an und schreiben Sie dann place-items: center für dasselbe Element. place-items ist eine Kurzschreibweise, um sowohl align-items als auch justify-items gleichzeitig festzulegen. Wenn Sie den Wert auf center setzen, werden sowohl align-items als auch justify-items auf center gesetzt.
.parent {
display: grid;
place-items: center;
}
Dadurch wird der Inhalt unabhängig von der intrinsischen Größe perfekt im übergeordneten Element zentriert.
02. Der dekonstruierte Pfannkuchen: flex: <grow> <shrink> <baseWidth>
Als Nächstes haben wir den dekonstruierten Pfannkuchen. Dies ist ein gängiges Layout für Marketing-Websites, die beispielsweise eine Zeile mit drei Elementen haben, normalerweise mit einem Bild, einem Titel und dann etwas Text, der einige Funktionen eines Produkts beschreibt. Auf Mobilgeräten sollen sie gut gestapelt werden und sich mit zunehmender Bildschirmgröße erweitern.
Wenn Sie Flexbox für diesen Effekt verwenden, benötigen Sie keine Medienabfragen, 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 also möchten, dass Ihre Boxen die Größe <flex-basis> haben, bei kleineren Größen schrumpfen, aber nicht gestreckt werden, um zusätzlichen Platz zu füllen, schreiben Sie: flex: 0 1 <flex-basis>. In diesem Fall ist <flex-basis> 150px, also:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Wenn Sie möchten, dass die Felder sich ausdehnen 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 jetzt die Bildschirmgröße erhöhen oder verringern, werden diese Flex-Elemente kleiner und größer.
03. Sidebar Says: 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 aber auf größeren Bildschirmen eine Ausdehnung auf 25% zu. Die Seitenleiste nimmt immer 25% des horizontalen Platzes des übergeordneten Elements ein, bis diese 25% kleiner als 150px wird.
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 bei 25% einen minmax von 150px und das zweite Element (hier der Abschnitt main) nimmt den restlichen Platz als einzelner 1fr-Track ein.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake-Stapel: grid-template-rows: auto 1fr auto
Im Gegensatz zum dekonstruierten Pancake 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 oft sowohl für Websites als auch für Apps verwendet, und zwar sowohl für mobile Anwendungen (die Fußzeile ist dann meist eine Symbolleiste) als auch für Websites (Single-Page-Anwendungen verwenden oft 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 bleibt, fügen Sie Folgendes hinzu:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dadurch wird die Größe des Header- und Footer-Inhalts automatisch an die Größe der untergeordneten Elemente angepasst. Der verbleibende Platz (1fr) wird dem Hauptbereich zugewiesen. Die Zeile mit der Größe auto nimmt die Größe des minimalen Inhalts ihrer untergeordneten Elemente an. Wenn der Inhalt also größer wird, wird auch die Zeile entsprechend vergrößert.
05. Klassisches Holy-Grail-Layout: grid-template: auto 1fr auto / auto 1fr auto
Dieses klassische Holy-Grail-Layout umfasst einen Header, einen Footer, eine linke Seitenleiste, eine rechte Seitenleiste und den Hauptinhalt. Es ähnelt dem vorherigen Layout, hat aber jetzt Seitenleisten.
Wenn Sie dieses 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 lautet: grid-template: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und zweiten durch Leerzeichen getrennten Liste ist der Trenner 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 Größe ihrer untergeordneten Elemente angepasst. Diesmal geht es jedoch um die horizontale Größe (Breite) statt um die vertikale (Höhe).
06. Raster mit 12 Spalten: grid-template-columns: repeat(12, 1fr)
Als Nächstes haben wir einen weiteren 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 Rastervorlagenspalten 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 Raster mit 12 Spalten und können die untergeordneten Elemente im Raster platzieren. Eine Möglichkeit hierfür ist die Platzierung mithilfe von Rasterlinien. 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 Startlinie und dann die Anzahl der Spalten fest, die sich von diesem Startpunkt aus erstrecken sollen. In diesem Fall entspricht grid-column: 1 / span 12 grid-column: 1 / 13 und grid-column: 2 / span 6 entspricht grid-column: 2 / 8.
.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 bereits gelernten Konzepte, um ein responsives Layout mit automatisch platzierten und flexiblen untergeordneten Elementen zu erstellen. Ziemlich praktisch, oder? Die wichtigsten Begriffe, die Sie sich hier merken sollten, sind repeat, auto-(fit|fill) und minmax()'. Sie können sich diese Begriffe mit dem Akronym RAM merken.
Zusammen sieht das so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden wieder „repeat“, aber dieses Mal mit dem Schlüsselwort auto-fit anstelle eines expliziten numerischen Werts. Dadurch werden diese untergeordneten Elemente automatisch platziert. Diese untergeordneten Elemente haben außerdem einen Mindestwert von 150px und einen Höchstwert von 1fr. Das bedeutet, dass sie auf kleineren Bildschirmen die gesamte Breite von 1fr einnehmen und ab einer Breite von 150px in dieselbe Zeile fließen.
Mit auto-fit werden die Boxen gestreckt, wenn ihre horizontale Größe 150 px überschreitet, um den gesamten verbleibenden Platz auszufüllen. Wenn Sie dies jedoch in auto-fill ändern, werden sie nicht gestreckt, 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. Damit werden das erste und das letzte untergeordnete Element an den Rändern des Begrenzungsrahmens platziert und der verbleibende Platz wird gleichmäßig zwischen den Elementen verteilt. Diese Karten werden in einem Flexbox-Anzeigemodus platziert, wobei die Richtung mit flex-direction: column auf „Spalte“ festgelegt wird.
Dadurch werden Titel, Beschreibung und Bildblock in einer vertikalen Spalte innerhalb der übergeordneten Karte platziert. Wenn Sie dann justify-content: space-between anwenden, werden das erste (Titel) und das letzte Element (Bildblock) an den Rändern der 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 kommen wir zu einigen Techniken, die 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>).
Dadurch werden eine absolute Mindest- und Höchstgröß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. Zeichenbreiteneinheiten basieren auf der Schriftgröße des Elements (insbesondere der Breite der Glyphe 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 vergrößere und verkleinere, wird die Breite dieser Karte bis zum festgelegten Maximalwert erhöht und bis zum festgelegten Minimalwert verringert. Es bleibt dann im übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um es zu zentrieren. Das ermöglicht besser lesbare Layouts, da der Text weder zu breit (über 46ch) noch zu schmal (unter 23ch) ist.
Dies ist auch eine gute Möglichkeit, responsive Typografie zu implementieren. Sie könnten beispielsweise Folgendes schreiben: 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 Darstellungsbereichs zu entsprechen.
Das ist eine gute Methode, um die Lesbarkeit mit einem Mindest- und Höchstwert für die Größe zu gewährleisten.
10. Seitenverhältnis beibehalten: aspect-ratio: <width> / <height>
Und schließlich löst dieses letzte Layout ein häufig auftretendes Problem: das Beibehalten des Seitenverhältnisses eines Bildes.
Mit dem Attribut aspect-ratio behält der grüne visuelle Block dieses Seitenverhältnis von 16 : 9 bei, wenn ich die Größe der Karte ändere. Wir berücksichtigen das Seitenverhältnis mit aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Wenn Sie ein Seitenverhältnis von 16:9 ohne dieses Attribut beibehalten möchten, müssen Sie einen padding-top-Hack verwenden und ein Padding von 56.25% festlegen, um ein Verhältnis von Höhe zu Breite festzulegen. Wir werden bald eine Property dafür haben, um den Hack und die Notwendigkeit, den Prozentsatz zu berechnen, zu vermeiden. Sie können ein Quadrat mit dem Seitenverhältnis 1 / 1, ein Rechteck mit dem Seitenverhältnis 2:1 mit 2 / 1 und eigentlich alles erstellen, was Sie brauchen, um dieses Bild mit einem festgelegten Seitenverhältnis zu skalieren.
.square {
aspect-ratio: 1 / 1;
}
Diese Funktion ist nützlich, da sie viele Probleme löst, mit denen ich selbst schon oft konfrontiert war, insbesondere bei Videos und iFrames.
Fazit
Vielen Dank, dass Sie uns auf dieser Reise durch 10 leistungsstarke CSS-Zeilen begleitet haben. Weitere Informationen finden Sie im vollständigen Video.