CSS-Parameter für einfache Grid-Layouts

Mit den folgenden CSS-Eigenschaften kannst du eine Beitragsliste in UpFront relativ einfach als Grid bzw. als flexible Karten darstellen.

`display: flex`

Aktiviert das Flexbox-Layout für ein Element.

ul.uf-posts {
    display: flex;
}

Die direkten Kind-Elemente des Containers – hier also die einzelnen Beiträge – können dadurch flexibel angeordnet werden.

`flex-wrap: wrap`

Erlaubt den Elementen, in die nächste Zeile umzubrechen, wenn nicht mehr genügend Platz vorhanden ist.

flex-wrap: wrap;

Ohne wrap würden die Elemente möglichst in einer einzigen Zeile bleiben. Für responsive Grids ist wrap deshalb besonders praktisch.

`flex`

Mit flex bestimmst du, wie sich ein Flex-Element innerhalb des verfügbaren Platzes verhält.

flex: 1 1 calc(33.333% - 20px);

Die drei Werte bedeuten:

1 – das Element darf wachsen.
1 – das Element darf schrumpfen.
calc(33.333% - 20px) – die Ausgangsbreite beträgt ungefähr ein Drittel des verfügbaren Platzes, abzüglich des gewünschten Abstands.

Damit lassen sich beispielsweise drei gleich große Spalten erzeugen.

`min-width`

Legt die minimale Breite eines Elements fest.

min-width: 280px;

Ein Beitrag wird dadurch nicht schmaler als 280px. Wird der verfügbare Platz kleiner, können die Elemente dank flex-wrap: wrap in die nächste Zeile wechseln.

Das ist besonders für responsive Layouts hilfreich.

`max-width`

Legt die maximale Breite eines Elements fest.

max-width: 460px;

Das Element kann also kleiner sein, aber nicht breiter als 460px werden.

Das eignet sich besonders für Kartenlayouts, bei denen die einzelnen Beiträge nicht beliebig breit werden sollen.

`box-sizing: border-box`

Sorgt dafür, dass padding und border bereits in der angegebenen Breite enthalten sind.

box-sizing: border-box;

Ohne border-box kann ein Element durch Padding oder Border tatsächlich breiter werden als die angegebene Breite.

Für flexible Layouts ist border-box deshalb meistens die unkompliziertere Variante.

`gap`

Definiert den Abstand zwischen den Flex-Elementen.

gap: 30px;

Hier beträgt der Abstand zwischen den Beiträgen 30px.

Der Vorteil gegenüber zusätzlichen margin-Angaben: Du musst nicht jedem einzelnen Beitrag eigene Abstände geben.

`display: inline-flex`

Kombiniert das Verhalten eines Inline-Elements mit Flexbox.

display: inline-flex;

Das Element verhält sich nach außen ähnlich wie ein Inline-Element, seine eigenen Inhalte können innerhalb des Elements aber mit Flexbox angeordnet werden.

Kurzreferenz

Parameter	Funktion
`display: flex`	Aktiviert Flexbox
`display: inline-flex`	Flexbox + Inline-Verhalten
`flex-wrap: wrap`	Erlaubt Zeilenumbrüche
`flex`	Bestimmt Wachstum, Schrumpfen und Ausgangsbreite
`min-width`	Legt die minimale Breite fest
`max-width`	Legt die maximale Breite fest
`box-sizing: border-box`	Bezieht Padding und Border in die Breite ein
`gap`	Definiert den Abstand zwischen den Elementen
`calc()`	Berechnet einen CSS-Wert dynamisch

Typische Kombination

Für ein einfaches responsives Grid ist diese Kombination besonders praktisch:

ul.uf-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

li.uf-post {
    min-width: 280px;
    box-sizing: border-box;
}

Darauf kannst du dann je nach gewünschtem Layout weitere Eigenschaften wie flex oder max-width aufbauen.

Wiki-Kategorie: UpFront