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

CSS min() und max()

CSS hat uns die Funktion clamp () beschert, in der die minimale, die optimale und die maximale Breite von Elemenen festgelegt wird. Die Vorgänger von clamp() waren min() und max().

min() notiert den schmalsten Wert aus einer kommagetrennten Liste von Ausdrücken. Wird der verfügbare Platz kleiner, passt sich das Element an die Breite an, bis ein minimaler Wert erreicht ist. Dann stoppt die Anpassung.

Die minimale Breite des Elements liegt zwischen 50% und 400px. Der Browser richtet sich am umfassenden Container aus. Wenn 50% der Containerbreite kleiner als 400px sind, nutzt der Browser 50% und ignoriert die 400px. Wenn 400px weniger als 50% der Containerbreite sind, nutzt er die 400px.

.cssmin {
	width: min(50%, 400px); 
	background: #efefef;
}

max() nimmt den größten Wert aus der Liste. Das Element wird 400px breit, aber wenn der umfassende Container größer als 400px ist, wächst das Element auf 50% der Containerbreite.

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 );
		}
	}
}