Annen Samling med Interessante Fakta Om CSS Rutenett

0
44

Siste år, har jeg satt sammen En Samling med Interessante Fakta om CSS Grid Layout etter å gi en workshop. Dette året var jeg jobbet på en annen workshop og jeg har lært litt mer spennende fakta om layout spec vi alle så elsker.

Selvfølgelig, jeg kommer ikke til å holde kunnskapen min til meg selv. Jeg er glad for å dele mine funn i gang igjen med deg, CSS-Triks samfunnet.

Forstå hvordan `grid` snarveien fungerer

Noen ganger, du har lest og forstått deler av grid—eller faktisk alle andre—spec kan være svært vanskelig.

For eksempel, det tok meg en stund å forstå hvordan man kan bruke nettet står på riktig måte. Spesifikasjonen sier at de gyldige verdier er:

<‘grid-mal’> | <‘grid-mal-rader’> / [ auto-flow && tett? ] <‘grid-auto-kolonner’>? | [ auto-flow && tett? ] <‘grid-autwo-rader’>? / <‘grid-mal-kolonner’>

Du kan få forstand av det, hvis du tar deg tid, eller hvis du er erfaren i å lese spesifikasjoner. Jeg prøvde flere kombinasjoner, og alle av dem mislyktes. Hva som til slutt hjalp meg, var et notat i spec:

Merk at du kan bare angi eksplisitt eller implisitt rutenett egenskaper i et enkelt rutenett erklæring.

Rachel Andrew har en serie innlegg som forklarer hvordan å lese en spesifikasjon, ved hjelp av CSS Rutenett som et eksempel.

Så, kan vi angi et mangfold av ting ved hjelp av rutenettet skriftspråk, men ikke alle av dem på en gang. Her er noen eksempler.

Med “grid” i favør av ” grid-mal`

Grid-mal eiendom er en forkortelse for innstillingen grid-mal-kolonner, grid-mal-rader, og grid-mal-områder i en enkelt erklæring. Vi kan gjøre det samme med rutenett skriftspråk, noe som er litt kortere.

rutenett: “en en” 200px
“to fire”
“tre fire”
/ 1fr 2fr;

/* forkortelse for: */
/*
grid-mal-områder: “one one” – “to fire”, “tre fire”;
grid-mal-rader: 200px;
grid-mal-kolonner: 1fr 2fr;
*/

Dette står skaper tre rader og to kolonner, med fire navngitte rutenett områder. Den første raden har et eksplisitt høyde for 200px, mens den andre og den tredje har en implisitt høyde på auto. Den første kolonnen har en bredde på 1fr og den andre en bredde på 2fr.

Se Penn rutenett stenografi – områder, eksplisitt rader og kolonner av Manuel Matuzovic (@matuzo) på CodePen.

Ønsker du å vite mer om forskjellen mellom en eksplisitt og en implisitt rutenett? Sjekk ut dette innlegget jeg skrev om emnet her på CSS-Triks.

Vi trenger ikke å angi områder hvis vi ikke trenger dem. Vi kan bruke rutenettet står bare for å definere eksplisitt rader og kolonner. De to følgende utdrag er i hovedsak gjør det samme:

grid-mal-rader: 100px 300px;
grid-mal-kolonner: 3fr 1fr;
rutenett: 100px 300px / 3fr 1fr;
Håndtering implisitt rader og kolonner

Det er mulig å bruke rutenett stenografi for å angi grid-auto-flow, så vel, men er det ikke akkurat arbeid som vi kan forvente. Vi ikke bare legge den rad eller kolonne søkeordet et sted i erklæringen. Vi har i stedet for å bruke auto-flow søkeord på riktig side av skråstreken.

Hvis den er til venstre side av skråstreken, står setter grid-auto-strømmen til rad og skaper eksplisitt kolonner.

rutenett: auto-flow / 200px 1fr;

/* forkortelse for: */
/*
grid-auto-flow: rad;
grid-mal-kolonner: 200px 1fr;
*/

Hvis det er til høyre for skråstrek, står setter grid-auto-flyt-til-kolonnen, og skaper eksplisitt rader.

rutenett: 100px 300px / auto-flow;

/* forkortelse for: */
/*
grid-mal-rader: 100px 300px;
grid-auto-flow: kolonne;
*/

Vi kan også angi størrelsen av implisitt spor sammen med auto-flow søkeord, som henholdsvis setter grid-auto-rader eller grid-auto-kolonner til den angitte verdien.

rutenett: 100px 300px / auto-flow 200px;

/* forkortelse for: */
/*
grid-mal-rader: 100px 300px;
grid-auto-flow: kolonne;
grid-auto-kolonner: 200px;
*/

Se Penn rutenett står eksplisitt rader og implisitt kolonner av Manuel Matuzovic (@matuzo) på CodePen.

Funksjonen søk i Kanten

Kontrollere støtte for CSS Rutenett fungerer bra med Funksjonen Søk fordi alle nettlesere som støtter Rutenett også forstå funksjonen spørringer. Dette betyr at vi kan sjekke hvis en nettleser som støtter den gamle eller den nye spec, eller begge deler. Begge, spør du? Starter med Kant 16, Kant ikke bare støtter den nye spesifikasjonen, men den gamle også.

Så, hvis du ønsker å skille mellom versjoner av Kanten som støtter den nye spec og de som ikke gjør det, må du skrive dine spørsmål som dette:

/* Edge 16 og høyere */
@støtter (display: -ms-grid) og (visning: rutenett) {
div {
bredde: auto;
}
}

/* Edge 15 og lavere */
@støtter (display: -ms-grid) og (ikke (visning: rutenett)) {
div {
margin: 0
}
}

Her er en hendig liten demo, som viser hvilken funksjon spørring utløser i nettleseren du åpnet den med.

Se Penn visning: rutenett støtte test av Manuel Matuzovic (@matuzo) på CodePen.

Som en side note, bør du ikke gå over med (mis)bruke funksjonen spørringer for browser-sniffing, fordi nettleseren deteksjon er dårlig.

Angi eksakt antall poster per kolonne

Rutenettet er flott for sideoppsett, men det kan være svært nyttig på en komponent nivå. En av mine favoritt eksempler er evnen til å angi den nøyaktige mengden av elementer per kolonne i en multi-kolonne komponent.

La oss si vi har en liste med 11 elementer, og vi ønsker å legge til en ny kolonne etter hver fjerde element. Det første vi ønsker å gjøre etter innstilling visning: rutenett på den overordnede er å endre måten nettet auto-plassering algoritmen fungerer. Som standard, det fyller i hver rad, i sin tur, legge til nye rader etter behov. Hvis vi setter grid-auto-flyt-til-kolonnen, grid vil fylle hver kolonne i sin tur i stedet, som er hva vi vil. Det siste vi må gjøre er å angi antall elementer per kolonne. Dette er mulig ved å definere så mange eksplisitte rader etter behov ved hjelp av grid-mal-rader eiendom. Vi kan stille høyden på hver rad uttrykkelig eller bare gjøre dem så stor som deres innhold ved hjelp av den automatiske søkeord.

ul {
visning: rutenett;
grid-mal-rader: auto auto auto auto;

/* eller kortere og enklere å lese: */
/* grid-mal-rader: repeat(4, auto); */
grid-auto-flow: kolonne;
}

Hvis vi har for å endre antall elementer per kolonne 5, vi bare å legge til et spor til spor liste eller vi gjør bruk av repeat-notasjon i stedet, og bare endre den første parameteren til ønsket verdi (grid-mal-rader: repeat(5, auto)).

Se Penn Begrenset antall poster per kolonne av Manuel Matuzovic (@matuzo) på CodePen.

Sticky bunntekster med CSS Rutenett

Det er mange måter å lage klebrig bunntekster i CSS. Noen av dem er hacky og komplisert, men det er ganske grei, med Rutenett.

La oss si vi har en *klassisk* header, innhold og bunntekst på side struktur.

<body>
<header>OVERSKRIFT</header>
<main>MAIN</main>
<footer>BUNNTEKST</footer>
</body>

Først, vi setter høyden av html og kroppen til minst 100% av viewport å sørge for at siden bruker alltid full vertikal plass. Deretter bruker vi grid-mal-rader for å dele kroppen inn i tre rader. Den første (header) og den siste (bunntekst) rad kan ha hvilken størrelse vi ønsker. Hvis vi vil bruke dem til å alltid være så stor som deres innhold, vi bare setter høyden på auto. Raden i midten (hoved) bør alltid fylle opp resten av rommet. Vi trenger ikke å beregne høyden fordi vi kan bruke brøkdel enhet for å oppnå det.

html {
høyde: 100%;
}

body {
min-height: 100%;
visning: rutenett;
grid-mal-rader: auto 1fr auto;
}

Som et resultat av de viktigste kroppen vokser og bunntekst justerer følgelig blir liggende på bunnen av vinduet.

Se Penn CSS Grid Layout Klebrig Bunntekst av Manuel Matuzovic (@matuzo) på CodePen.

Automatisk minimum størrelse på rutenettet elementer

Nylig, Florian twitret at han lurte på hvorfor truncating enkelt linje tekst i et rutenett element var så komplisert. Hans eksempel perfekt illustrerer et interessant faktum om grid elementer.

Den starter situasjonen er en tre-kolonnen rutenett med et avsnitt i hvert rutenett element.

<div class=”grid”>
<div class=”item”>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ipsum exercitationem voluptate, autem veritatis enim soluta beatae odio accusamus molestiae, perspiciatis sunt maiores quam. Deserunt, aliquid inventore. Ullam, fugit dicta.
</p>
</div>
</div>
.grid {
visning: rutenett;
grid-mal-kolonner: repeat(3, 1fr);
grid-gap: 20 piksler;
}

Hvert avsnitt skal bare være én linje, og viser en ellipse på slutten av linjen hvis avsnitt er lengre enn det overordnede elementet. Florian løst det ved å sette white-space for å nowrap, som tvinger en enkelt linje, skjule overløp og sette tekst-overløp til ellipse.

p {
white-space: nowrap;
overflow: hidden;
tekst-overflow: ellipse;
}

Dette ville ha fungert helt fint på en blokk, element, men i dette rutenettet eksempel kolonner utvide bredden på én linje avsnitt:

Se Penn Automatisk minimum størrelse på rutenettet elementer av Manuel Matuzovic (@matuzo) på CodePen.

Stort sett skjer dette, fordi et rutenett elementet kan ikke være mindre enn sine barn. Standard-min-bredden på en grid-elementet (eller flex-elementet) er satt til auto, som i henhold til spesifikasjoner:

…gjelder et automatisk minimum størrelse i den angitte aksen til rutenett elementer med overløp er synlig, og som spenner over minst ett spor med min spore dimensjonering funksjon er auto.

Dette gjør rutenett og flex varer mer fleksibel, men noen ganger er det ikke ønskelig at innholdet er i stand til å strekke sine overordnede elementer bredde. For å unngå at vi kan enten endre overløp eiendom rutenett-element til noe annet enn synlig eller sette min-bredde til 0.

Se Penn Avkorte Tekst i CSS Rutenett av Manuel Matuzovic (@matuzo) på CodePen.

Les mer om Automatisk Minimum Størrelse på Rutenettet Elementer i rutenettet spec.

Innpakning opp

Forhåpentligvis disse siste takeaways hjelpe deg å føle deg mer komfortabel med å skrive og bruke nettet som de har for meg. Det er for mye detalj i dette nye spesifikasjonen, men det blir mer interessant og forståelig med mer bruk.