CSS clamp() und grid – Layout-Spalten mit clamp einrichten

CSS min() und max()

Die Kombination aus width und max-width bzw. min-width steuert das Verhalten eines Elements bei unterschiedlichen Bildschirmgrößen oder Layouts. Heute ersetzt CSS max() das Duo width und max-width und min() ersetzt das Duo width und min-width.

Box mit den Anfasser unten rechts größer ziehen oder den Slider nutzen.

• width: min(50%, 300px);
  width: min(300px, 50%);
  Das Element wird maximal 300px breit, aber schmaler bei einem kleineren Platzangebot. Das Element übernimmt immer den kleineren der beiden Werte.
• width: max(300px, 50%)
  width: max(50%, 300px)
  Das Element wird mindestens so breit wie der größere der beiden Werte – also entweder 300px oder 50% der verfügbaren Breite, je nachdem, was größer ist.

Die Angaben max(300px, 50%) und max(50%, 300px) sind identisch, denn die Reihenfolge der Argumente ist egal. Das gilt nach für min(300px, 50%) und min(50%, 300px).

min() und max() waren die Vorgänger von clamp(). clamp () legt die minimale, die optimale und die maximale Breite von Elemenen fest.

Ein Layout mit clamp() steuern

Das Layout soll zwei Spalten zeigen: Eine Spalte für den Inhalt, eine Seitenspalte oder »Marginale«. Wenn der ViewPort weniger als 1160px breit ist, kollabieren die Spalten und werden untereinander gezeigt. Da Spalte 1 und Spalte 4 nur den »Rand« oder »Margin« darstellen, werden sie bei kleinen Viewports völlig ausgeblendet.

.grid {
	display: grid;
	grid-template-columns:
		1fr                        /* spalte1: Restplatz links */
		min(100%, 700px)           /* spalte2: max. 900px */
		clamp(300px, 10vw, 400px)  /* spalte3: min 300, max 400 */
		1fr;                       /* spalte4: Restplatz rechts */
	gap: 1rem;
	padding: 1rem;

	/* Bei zu wenig Platz alles untereinander */
	@media (max-width: 1160px) {
		grid-template-columns: 1fr;
    
		.spalte1, .spalte4 { display: none; }
	}
}

	<div class="spalte spalte1">1</div>
	<div class="spalte spalte2">2</div>
	<div class="spalte spalte3">3</div>
	<div class="spalte spalte4">4</div>

clamp() und CSS grid – Vereinigung von min() und max()

clamp() klammert einen Wert zwischen einem Minimum und einem Maximum und weist dem Element den mittleren Wert zwischen Unter- und Obergrenze zu. Die CSS-Funktion minmax() eignet sich besonders gut als Grundlage für ein responsives Grid, das sich flüssig und ohne Breakpoints an das Platzangebot anpasst.

Das Grid-Template hat einen minimalen Wert von 150px und ein Maximum von 25% für die erste Spalte. Die Breite der zweiten Spalte beruht auf fr (fraction).

.clamp-2-columns { 
  max-width: 1200px;
  display: grid; 
  grid-template-columns: minmax(150px, 25%) 1fr; 
  grid-template-rows: 200px; 
  grid-gap: clamp(5px, 2vw, 20px);   
}
.column-1 { 
  background-color: cornflowerblue;  
}
.column-2 { 
  background-color: orange; 
}

clamp() in grid-template-columns

Hier legt clamp() eine minimale und maximale Größe für grid-template-columns fest. Die Breite der ersten Spalte ist auf Werte zwischen 100px und 25% des verfügbaren Platz beschränkt. Die zweite Spalte verwendet den Rest des Platzangebots (1fr).

.grid-container {
	max-width: 1680px;
	display: grid;
	grid-template-columns: clamp(100px, 25%, 400px) 1fr;
}

.grid1 { background: cornflowerblue; }
.grid2 { background: orange; }

Spalten, clamp und calc

Der Hamburger auf der linken Seite und das Logo rechts sollen sich innerhalb von 1000px ausbreiten, und dabei einen Mindestabstand vom linken bzw. rechten Rand halten.

.grid2cols {
	grid-template-columns: 1fr 1fr;
	
	& .gridhamburger {
		background: #666;
		& img {
			width: 80px;
			margin-left: clamp(2rem,  calc(50vw - 500px ), 1500px);
		}
	}
	
	& .gridlogo {
		background: #333;
		& img {
			float: right;
			margin-right: clamp(2rem, calc((50vw - 500px)), 1500px );
		}
	}
}