CSS Grid Layout hemmeligheter avslørt

Innhold

• 01. Minmax () -funksjonen
• 02. Autofyll og automatisk tilpasning
• 03. Tett pakningsmodus
• 04. Magiske linjer og magiske områder
• 05. Standardjustering
• 06. Tilbakeslag
• 07. Dimensjonering med mininnhold og maksinnhold
• Nivå 2-funksjoner
• 08. Avvik endres
• 09. Rutenett er ikke murverk
• 10. Rutenett pseudo-elementer

CSS Grid Layout ble lansert i nettlesere i mars 2017, og i skrivende stund vil godt over 70 prosent av de besøkende på de fleste nettsteder ha nettstøtte. Denne figuren vokser raskt, og vil forbedre seg når Edge sender sin oppdaterte støtte.

Jeg håper du allerede har hatt en sjanse til å utforske noen av funksjonene i CSS Grid Layout. Denne artikkelen tar en titt på noen av funksjonene du kanskje har gått glipp av. Jeg vil også se på noen få ting som kan komme i fremtidige nivåer av spesifikasjonen.

01. Minmax () -funksjonen

I motsetning til andre layoutmetoder, der vi trenger å sette størrelse på selve varen, setter vi størrelse på containernivå i Grid Layout. Vi definerer spor, som lager rutenettceller, i hvilke innhold kan plasseres.

For å gjøre dette på en fleksibel måte, og tillate innhold som kan være mindre eller større enn designet forventet, bringer Grid nye funksjoner til CSS. En av disse er minmax () funksjon. Denne funksjonen betyr at du kan spesifisere et minimum og et maksimum for et spor.

I eksemplet nedenfor har jeg et pent panel med en overskrift øverst til venstre og et stort bilde til høyre. Jeg vil at den øverste raden skal være minst 150 piksler høy, uansett hvor mange rader overskriften eller annet innhold måtte trenge.

Imidlertid, hvis det er flere innholdslinjer eller tekststørrelsen er større, vil jeg at boksen skal vokse seg større enn 150 piksler. Det er her jeg bruker minmax (), angir en minimumsstørrelse på 150 piksler og et maksimum på auto.

.grid {display: grid; rutenett-mal-kolonner: 1.2fr 1fr; grid-mal-rader: minmax (150px, auto) minmax (300px, auto); }

Ved bruk av minmax (), hvis vi bare har overskriften i den boksen, er boksen høyere enn den nødvendige plassen. Hvis vi har lengre overskrift og tilleggstekst, utvides den for å gi plass.

02. Autofyll og automatisk tilpasning

Flexbox muliggjør mange responsive designmønstre uten at vi trenger å støtte oss på Media Queries. Grid går et skritt videre, og muliggjør fleksible designmønstre med elementer oppstilt i to dimensjoner: etter rad og etter kolonne. Et nyttig mønster er å kunne ha så mange kolonner som passer inn i en container, og for å gjøre dette bruker vi to nye nøkkelord: automatisk fylling og automatisk tilpasning.

For å ha så mange 200 piksler kolonnespor som passer inn i en container, bruk en sporliste med:

.grid1 {display: grid; rutenettmal-kolonner: gjenta (automatisk fylling, 200px); }

For å gjøre disse kolonnene fleksible, men hold et minimum på 200 piksler, ta inn minmax () funksjon som jeg beskrev i forrige tips. Vi kan lage kolonner som er minst 200 piksler med maksimalt 1fr. Etter å ha funnet ut hvor mange 200-pikselkolonner som passer, tildeler nettleseren resterende plass like mellom kolonnene våre.

.grid1 {display: grid; grid-mal-kolonner: gjenta (auto-fill, minmax (200px, auto)); }

Jeg har brukt automatisk fylling nøkkelord her; dette vil opprettholde plass til spor selv om det ikke er noe innhold for dem. Hvis du i stedet bruker automatisk tilpasningvil eventuelle helt tomme spor bli kollapset og deres plass tildelt de andre sporene.

03. Tett pakningsmodus

Når du erklærer display: rutenett på et element blir alle direkte barn rutenett, og elementene begynner å automatisk legge seg ut på det rutenettet. Dette skjer basert på reglene for automatisk plassering som er definert i spesifikasjonen.

Hvis noen av artiklene dine spenner over spor, og dette betyr at det er elementer som ikke passer i et tilgjengelig spor, vil de opprette en ny rad i rutenettet. Som standard går Grid fremover og viser elementene i den rekkefølgen de vises i kilden.

Men hvis du angir verdien på grid-auto-flow til tett, Grid vil begynne å gå tilbake etter å ha forlatt disse hullene. Hvis den finner et element som vil passe inn i et gap som allerede er igjen, vil det plukke det opp og plassere det utenfor kildens rekkefølge, inn i gapet.

.grid {display: grid; grid-auto-flow: tett; grid-mal-kolonner: gjenta (auto-fill, minmax (200px, 1fr)); }

Denne oppførselen er nyttig hvis elementene du viser ikke har en logisk rekkefølge, men du kan enkelt gjøre et oppsett veldig vanskelig for noen som navigerer ved hjelp av tastaturet hvis de tabber fra element til element. Bruk denne funksjonen med stor forsiktighet og testing!

04. Magiske linjer og magiske områder

Når du bruker metoden Grid Template Areas for å legge ut innhold, oppretter du et navngitt område på rutenettet ditt. Dette skaper igjen et sett med navngitte linjer for rader og kolonner som bruker områdets navn med -start og -slutt vedlagt. I dette neste eksemplet har jeg brukt de nevnte linjene opprettet ved å plassere rutenettområdene mine for å plassere et overlegg.

.grid {display: grid; rutenettmal-kolonner: 1fr 2fr 1fr; grid-auto-rows: minmax (100px, auto); grid-template-areas: "sd1 content sd2" "sd1 footer sd2"; } .side1 {grid-area: sd1; } .side2 {grid-area: sd2; } .innhold {grid-area: content; } .footer {grid-area: footer; } .grid .overlay {grid-column: sd1-start / sd2-end; grid-row: content-start / footer-end; }

Dette fungerer omvendt når du bruker navngitte rutenettlinjer. Hvis du navngir linjer som slutter med -start og -slutt for kolonner og rader, vil du opprette et navngitt område av hovednavnet som brukes.

Et område definert av linjene innholdsstart og innholdsslutt for rader og kolonner, vil ha navnet innhold. Du kan plassere et element i det området med rutenett: innhold.

05. Standardjustering

Når et element blir et rutenett, er standard oppførsel å strekke seg over rutenettet; det er med mindre gjenstanden er noe med et indre sideforhold. Hvis elementet har et sideforhold, vil det justeres til startlinjen i både rad- og kolonneretning. Dette betyr at Grid ikke vil strekke bildene dine ut av proporsjoner som standard, selv om du selvfølgelig kan gjøre det hvis du vil ved å endre justeringsadferden.

06. Tilbakeslag

Skrevet inn i CSS Grid-spesifikasjonen er detaljene i hvordan CSS Grid Layout tilsidesetter andre layoutmetoder. Hvis du har et element som er flytende, bruker display: tabell eller display: innebygd blokk og blir deretter et rutenett, spesifikasjonen forklarer hva som vil skje.

Kort sagt, når et element blir et rutenett, finner du:

• Hvis den er flytende, eller bruker den klare egenskapen, vil disse egenskapene slutte å påvirke varen.
• Hvis den har skjerm: inline-blokk eller bruker en tabellegenskap som display: tabellcelle disse gjelder ikke lenger.
• I tilfelle av tabellegenskaper, anonyme bokser som genereres når du bruker display: tabellcelle uten foreldretabell blir det ikke lenger opprettet.
• vertikaljustering gjelder ikke lenger.

Jeg opprettet et cheatsheet som beskriver disse overstyringene med eksempler. Du finner det på siden min.

Mens du stoler på denne overordnede oppførselen, vil det i mange tilfeller fungere, må du være forsiktig med bredder som er satt på elementer som senere blir rutenett. I tidligere layoutmetoder kontrollerer vi bredden på et element på varen.

Med Grid plasserer vi varen i en rutenettcelle som begrenser den. Dette betyr at hvis du har et element med en innstilt prosentbredde, vil bredden løpe til en prosentandel av rutenettet når elementet blir et rutenett.

Løsningen for dette er en annen CSS-spesifikasjon: Feature Queries. Vi kan bruke en funksjonsspørring for å teste for støtte for nettoppsett. Hvis nettleseren støtter Grid, setter jeg bredden til auto.

.grid> div {float: left; bredde: 33,333%; } @supports (display: grid) {.grid> div {width: auto; }}

07. Dimensjonering med mininnhold og maksinnhold

CSS Intrinsic & Extrinsic Sizing Module Level 3 spesifikasjon definerer flere nøkkelord for dimensjonering. Disse nøkkelordene inkluderer min-innhold og maks innhold, som kan brukes til å definere dimensjonering i rutenettene dine.

Som et veldig enkelt eksempel har jeg opprettet et to-kolonnegitterrutenett. En kolonne er definert som min-innhold størrelse, den andre kolonnen maks innhold. Det første sporet er bare så stort som nødvendig for å vise et enkelt ord av innholdet - dette er den minste størrelsen som dette sporet kan være. Den andre utvides for å tillate at hele raden vises, noe du kan finne forårsaker overløp du trenger å administrere og håndtere.

.grid {display: grid; grid-mal-kolonner: min-innhold max-innhold; }

Nivå 2-funksjoner

Grid-spesifikasjonen er nå på kandidatanbefalingsstatus, noe som betyr at vi håper ikke å gjøre noen større endringer i spesifikasjonen; i stedet går den videre til en fase der vi ser etter minst to implementeringer av hver funksjon. Dette sikrer at spesifikasjonen er fornuftig og kan implementeres av nettlesere.

Ting skjer fremdeles for Grid, men i resten av denne artikkelen vil vi se på en nylig endring av nivå 1-spesifikasjonen og et par ting som vi kanskje må se frem til i nivå 2.

08. Avvik endres

De rutenett-gap stenografi, pluss langhånd rutenett-kolonne-gap og gitter-rad-gap eiendommer ble endret i løpet av august 2017 CSS arbeidsgruppemøte for å bli mellomrom, kolonnegap og radgap. De har også blitt flyttet til å ha sine definisjoner i Box Alignment-spesifikasjonen.

Dette er spesifikasjonen som tok de fine justeringsfunksjonene fra Flexbox og utvidet seg slik at de også kunne brukes i Grid - og potensielt andre layoutmetoder også.

Å plassere gapfunksjonene i Box Alignment-spesifikasjonen og navngi dem på en mer generisk måte, betyr at de kan brukes i andre layouttyper der de gir mening. Det åpenbare stedet hvor de gir mening er i Flexbox.

Dette omdøpet betyr at vi til slutt får ordentlig hull i Flexbox; ikke mer rote med marginer. Nettlesere vil kalle de gamle navnene til de nye, så hvis du allerede har brukt hull i Rutenettoppsett, brytes ikke koden. Imidlertid vil du kanskje også legge til begge egenskapene selv; nettlesere ignorerer den de ikke støtter.

09. Rutenett er ikke murverk

Når folk først ser den tette pakkemodusen som jeg demonstrerte tidligere i denne artikkelen, tenker de ofte at Grid kan utføre mønsteret for murverk. Mur er imidlertid en helt annen type layout. En standard muroppsett er ikke et strengt rutenett, noe som gjør at dette mønsteret sitter et sted mellom hva Flexbox er god for og hva Grid gjør.

I CSS-arbeidsgruppen tenker vi imidlertid på dette problemet. Det er noe vi vet at utviklere virkelig vil være i stand til å gjøre. Du kan finne diskusjonen i CSS WG utkast repository på GitHub, og til og med legge til tankene dine også.

10. Rutenett pseudo-elementer

En annen vanlig forespørsel om rutenettoppsett er muligheten til å style rutenettcellene eller områdene uten å måtte sette inn et element i stilen. For øyeblikket, for å legge til grenser i et område, må du legge til et tomt element i markeringen eller bruke generert innhold til å lage et rutenett som kan utformes.

Det er et spørsmål som er reist i forhold til å vurdere å legge til et slags pseudo-element for nettområder. Dette vil følgelig gi deg noe å målrette hvis du vil legge til bakgrunner eller grenser til et bestemt område uten å legge til litt ekstra markering eller bruke generert innhold.

Denne artikkelen dukket opprinnelig opp i utgave 298 av nettmagasinet, magasinet for profesjonelle webdesignere og utviklere - som tilbyr de nyeste nye webtrender, teknologier og teknikker. Kjøp utgave 298 her eller abonner på nett her.

Likte dette? Les disse!

• Lag et responsivt oppsett med CSS Grid
• Få fart på CSS Grid
• En guide til å skrive bedre CSS