Het voorkomen van een Raster Blowout

0
13

Stel dat u een zeer eenvoudige CSS grid lay-out met één kolom vastgesteld op 300 pixels en een andere toegang tot de rest van de ruimte op 1fr.

.raster {
display: grid;
grid-template-kolommen: 1fr 300px;
}

Dat is enigszins robuust. Dat 1fr kolom zal duren alle resterende ruimte achtergelaten door de vaste 300px kolom. Het is waar dat de waarde auto zou hetzelfde doen, maar de auto is niet zo robuust, omdat het de grootte is gebaseerd op de inhoud in. Dus, als je had te weinig inhoud, dan de kolom kan niet vullen de hele ruimte u wilt. Maar terwijl 1fr is iets robuuster is, zal het niet heel beschermen u van inhoud die is te groot!

Hier is het raster gedraagt zich prima met wat tekst inhoud:

Nu, kijk dat rechterkolom krijgen geblazen de pagina wanneer we laten een gigantische afbeelding in die kolom:

Dat is eenvoudig op te lossen — en je kan zelfs nog nooit hebt het aan jou gebeuren, omdat dit fragment is zo gewoon in onze stylesheets:

img {
max-width: 100%;
}

Maar sommige elementen zijn niet zo vriendelijk. Neem de beruchte <pre> – tag. Zeggen we gooien een van de mensen die in onze 1fr kolom met een lange tekstreeks. We zijn terug aan het vergaan:

Deze keer, de dingen zijn niet zo eenvoudig op te lossen! Zelfs een poging om de limiet van de breedte en verbergen van de overloop van <pre> is niet van plan om te helpen:

pre {
max-width: 100%;
overflow: hidden;
}

De echte fix is niet zo moeilijk — we hoeven alleen maar te begrijpen wat er gebeurt. Ik kan niet beloven dat ik dit uitlegde 100% nauwkeurig, maar de manier waarop ik het begrijp, is de minimum breedte van een raster kolom is de auto. (Hetzelfde geldt voor de flex-items, by the way.)

En aangezien de auto is volledig gebaseerd is op de inhoud, kunnen we zeggen dat het “voor onbepaalde tijd” formaat, de afmetingen flex. Als we een expliciete breedte van de kolom, zoals 50% of 400px, dan zouden we zeggen dat het “zeker” en kleinbedrijf.

Om onze oplossen, moeten we ervoor zorgen dat er de kolom heeft een bepaalde minimum breedte in plaats van de auto.

Dus, kunnen we lossen het als volgt:

.raster {
/* de automatische minimum breedte, waardoor het probleem */
grid-template-kolommen: 1fr 300px;

/* fix: minimum breedte van 0 */
grid-template-kolommen: minmax(0, 1fr) 300px;
}

Of we zetten een werkelijke min-width op het element dat op dat raster kolom. In onze eenvoudige demo, <main> element automatisch plaatst zichzelf in die eerste kolom moeten er als het is het eerste kind van het raster.

Dat geeft ons dit:

belangrijkste {
min-width: 0;
}

Ik denk dat het een beetje meer robuuste om dit te doen op het rooster definitie niveau. Hoe dan ook, het is de truc! Zie hoe de <pre> tag wordt nu respecteert de breedte van de kolom en kan overstromen zoals verwacht?

Mooi.