Att förhindra ett Rutnät Blowout

0
15

Säg att du har en mycket enkel CSS-grid layout med en kolumn fast vid 300px och en annan tar upp resten av utrymmet på 1fr.

.grid {
display: nätet.
grid-template-kolumner: 1fr 300px;
}

Det är något robust. Att 1fr kolumn kommer att ta upp eventuella kvarvarande utrymme kvar av den fasta 300px kolumn. Det är sant att auto värde skulle göra samma sak, men auto är inte lika robust eftersom det är storlek är baserad på innehållet inuti. Så, om du fått för lite innehåll, då din kolumn kan inte fylla hela det utrymme du vill ha det till. Men medan 1fr är något mer robust, det kommer inte att helt skydda dig från innehåll som är för stor!

Här är nätet beter sig bara bra med lite text innehåll:

Titta nu på att högra kolumnen för att få blåst från sidan när vi släpper en gigantisk bild i den kolumnen:

Det är lätt att fixa, och du kan aldrig har även det hända att du, eftersom detta utdrag är så vanliga i våra stilmallar:

img {
max-width: 100%;
}

Men vissa delar är inte så vänliga. Ta den beryktade <pre> – taggen. Säger vi kasta en av dem i vår 1fr kolumn med en lång sträng av text. Vi är tillbaka till förstörda:

Den här gången, det är inte så lätt fixat! Ännu ett försök att begränsa bredden och dölja överflöd av <pre> inte kommer att hjälpa till:

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

Den verkliga fix är inte så svårt — vi behöver bara förstå vad det är som händer. Jag kan inte lova att jag förklarar detta 100% korrekt, men det sätt som jag förstår det, den minsta bredden av ett rutnät kolumnen är automatisk. (Det samma gäller för böj objekt, förresten.)

Och sedan auto är helt och hållet baserade på innehållet, kan vi säga att det är “på obestämd tid” storlek, dess dimensioner flex. Om vi skulle sätta en tydlig bredd på kolumn, som 50% eller 400px, då vi skulle säga att det är “definitivt” storlek.

Att tillämpa vår fix, vi måste se till att det finns kolumnen har en bestämd minsta bredden istället för på auto.

Så, vi kan antingen fixa det så här:

.grid {
/* auto minsta bredd, vilket orsakar problem */
grid-template-kolumner: 1fr 300px;

/* fix: minsta bredd på 0 */
grid-template-kolumner: minmax(0, 1fr) 300px;
}

Eller ska vi sätta en faktisk min-width på de element som ligger i att grid kolumn. I vår enkla demo <main> – element som automatiskt ställer sig i den första kolumnen, eftersom det är första barnet av nätet.

Att ge oss detta:

main {
min-width: 0;
}

Jag tror att det är lite mer robust för att göra detta på nätet definition nivå. Hur som helst, det gör susen! Se hur <pre> – taggen nu avseenden bredden på kolumnen och kan overflow som förväntat?

Trevligt.

SHARE
Previous articleFigurene av CSS
Next articleDe Former av CSS