Å hindre et Rutenett Blowout

0
27

Si du har en veldig enkel CSS-grid layout med en kolonne fast på 300px og en annen tar opp resten av plassen på 1fr.

.grid {
visning: rutenett;
grid-mal-kolonner: 1fr 300px;
}

Det er noe robust. Som 1fr kolonnen vil ta opp mye plass som er igjen av den faste 300px kolonne. Det er sant at auto verdi ville gjøre det samme, men auto er ikke fullt så robust siden det er størrelsen er basert på innholdet på innsiden. Så, hvis du hadde for lite innhold, klikk kolonnen kan ikke fylle hele plassen du ønsker at den skal. Men mens 1fr er litt mer robust, det vil ikke helt beskytte deg fra innhold som er for stor!

Her er rutenettet oppfører seg helt fint med litt tekst og innhold:

Nå, se på at høyre kolonne få blåst av siden når vi slippe en gigantisk bilde i kolonnen:

Det er lett å fikse, og du kan aldri selv har det skje med deg, fordi denne kodebiten er så vanlig i våre stilark:

img {
maks bredde: 100%;
}

Men noen elementer er ikke så vennlige. Ta den beryktede <pre> – tag-en. Sier vi kaste en av dem i vårt 1fr kolonne med en lang tekststreng. Vi er tilbake til forliste:

Denne gangen, ting er ikke så lett fast! Selv forsøker å begrense bredden og skjule overløp av <pre> ikke kommer til å hjelpe:

pre {
maks bredde: 100%;
overflow: hidden;
}

Den virkelige fix er ikke alle som vanskelig, vi trenger bare å forstå hva som skjer. Jeg kan ikke love at jeg forklare dette 100% nøyaktig, men slik jeg forstår det, minimum bredde på et rutenett kolonnen er auto. (Det samme gjelder for flex elementer, forresten.)

Og siden auto er i sin helhet basert på innhold, kan vi si at det er “uendelig” størrelse, dets dimensjoner flex. Hvis vi setter en eksplisitt bredden på kolonnen, som 50% eller 400px, så vi vil si det er “definitivt” størrelse.

Å bruke vår løsning, vi må sørge for at det er kolonne har en klar minimum bredde i stedet for auto.

Så, vi kan fikse det slik:

.grid {
/* auto minimum bredde, forårsaker problemet */
grid-mal-kolonner: 1fr 300px;

/* fix: minimum bredde på 0 */
grid-mal-kolonner: minmax(0, 1fr) 300px;
}

Eller, vi sette en faktisk min-bredden på det elementet som ligger i at grid-kolonnen. I vår enkel demo, <main> – element automatisk plasserer seg i den første kolonnen som det er det første barnet av nettet.

Som gir oss dette:

main {
min-width: 0;
}

Jeg tror det er litt mer robust for å gjøre dette på nettet definisjon nivå. Uansett, det gjør susen! Se hvordan <pre> – tag nå respekterer bredden på kolonnen og kan overløp som forventet?

Fin.

SHARE
Previous articleHet Vormen van CSS
Next articleFigurene av CSS