Fashion Fleksible layouter med CSS-gitter

Sep 13, 2025
hvordan
A woman sits at a laptop tweaking a CSS Grid layout

CSS-gitteret er perfekt til at skabe toakse layouts af rækker og kolonner. Syntaksen er enkel og gør sidelayout en brise. Layouts, der ville have krævet flere indlejrede containere, kan nu blot beskrives i CSS.

Gitter fungerer forskelligt på andre layoutegenskaber, da anvendelsen af ​​"net" -værdien til 'Display'-ejendommen påvirke eventuelle direkte børn. Disse elementer er nu gitterartikler og vil blive placeret i overensstemmelse med de regler, du har angivet på forældren (medmindre det er specielt placeret).

Få fat i nettet

Gitter bringer en række nye funktioner:

  • GRAP GAP.

I stedet for at bruge margener har Gitter sin egen ejendom til at definere huller mellem gitterartikler, der gør det muligt at definere gitterets layout at blive defineret og upåvirket af eventuelle huller. Gittersystemer (som dem, der findes i Inuit og Twitter Bootstrap), stoler normalt på at sætte negative margener for at justere alt korrekt.

  • FR-enheden

Kort for fraktion bruges denne nye måleenhed til at opdele layoutet til fraktioner, med eller uden et hul.

  • Gitterplacering

CSS-gitter tillader, at ethvert element prioriteres og placeres hvor som helst på nettet før alle andre elementer, som derefter placeres automatisk.

  • Gitterområder og skabeloner

Navngivne områder på gitteret er defineret, som derefter kan henvises til at definere layoutet på en næsten ASCII-mode.

  • Minmax ()

'Minmax ()' ejendomsværdi giver dig mulighed for at anvende en minimum og maksimal størrelse for gitterartikler, kolonner og rækker. Denne funktion mangler desværre fra Flexbox og hvert andet layoutmodul i CSS.

Byg dine gitter

CSS gitterets kraftfulde områder og skabeloner gør det muligt at opnå komplicerede layouts at blive opnået. Du starter med at anvende et navn til elementerne i dit net ved hjælp af 'Gitterområde' ejendom - for eksempel 'Header {Gitterområde: Header; } '. Når du har navngivet alle de områder i dit net, kan du derefter bruge ejendommen "Gitterskabel-områder" til at beskrive layoutet. 

 Gitter-skabelonområder:
  "Header header header"
  "Venstre-sidebar Article Right-Sidebjælke"
  "Footer footer footer"
;

Kodeeksemplet ovenfor beskriver et tre-by-tre-net, du gentager blot navnet på gitteret, hvis du vil have det til at spænde over flere kolonner eller rækker. Du kan også bruge medieforespørgsler for at ændre gitterlayoutet til forskellige skærmbilleder.

Du kan derefter bruge den nye 'FR' enhed for at definere, hvordan bredden er opdelt blandt de forskellige kolonner: 

 Gitter-template-kolonner: 1 FRR 3FR 1FR;

Eksemplet vist ovenfor vil opdele den tilgængelige bredde i fem lige bredde værdier; Med andre ord vil det anvende en femtedel til den første kolonne, tre femtedele til den anden kolonne og den sidste femte til den endelige kolonne.

For at størrere rækkerne kan du bruge den nye 'MINMAX' ejendomsværdi for at størrere top- og nederste kolonner til deres indhold og derefter tillade den midterste række at spænde over det resterende rum i nettet. 

 Gitter-skabelon-rækker:
  Minmax (min-indhold, max-indhold)
  Auto.
MINMAX (min-indhold, max-indhold);

Denne artikel blev oprindeligt offentliggjort i udstedelse 271 af Creative Web Design Magazine Web Designer. Købe Udgave 271. eller Abonner på webdesigner .

Ønsker du at styrke dine CSS-gitterfærdigheder?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Brenda Storeser giver hende tale ved hjælp af CSS-nettet i den virkelige verden på generering New York fra 25 - 27. april 2018

Som designer og front-end udvikler på et softwareudviklingsagentur har Brenda Storeser brugt CSS-net i produktion til websteder siden dets første udgivelse til browsere i marts 2017 og er en stor fan.

I hendes tale på Generer New York fra 25.-27 april 2018 , Brenda vil vise trin-for-trin, hvordan du gradvis kan forbedre dit websted med CSS-net og skrive et skudtæt Faldback til ældre browsere (eller endda fortsætte med at bruge din nuværende netrammer som en tilbagesendelse), alle med rene CSS: Ingen JavaScript kræves .

Generer New York finder sted fra 25.-27. April 2018. Få din billet nu .

Relaterede artikler:

  • CSS Grid Layout Secrets Revealed
  • Skabe et lydhørt layout med CSS-grid
  • Få op til hastighed med CSS-grid

hvordan - Mest populære artikler

Sådan komprimeres billeder: En webdesignervejledning

hvordan Sep 13, 2025

Den gennemsnitlige hastighed på en moderne internetforbindelse ville lyde meget futuristisk til webmastere fra fortiden. Tilbage..

Sådan rierer du et ansigt til animation

hvordan Sep 13, 2025

Da jeg først lærte at skabe karakter rigge i Maya vej tilbage i 2002, mens du arbejdede på PlayStation 2-titlen Superman: Skyg..

5 ting du har brug for til oliemaleri

hvordan Sep 13, 2025

Der er en uberettiget mystik omkring oliemaleri, der har lagt nogle kunstnere væk fra at udforske dem. Hvis du kender den rigtig..

19 Tips til Great Poser Art

hvordan Sep 13, 2025

Side 1 af 2: Side 1 Side 1 Side 2. ..

Sculpt realistisk anatomi i zbrush

hvordan Sep 13, 2025

Side 1 af 2: Side 1 Side 1 Side 2. Hvis du vil gå videre end blot ..

Sådan opretter du stiliseret spil kunst

hvordan Sep 13, 2025

Kunstens stil af førstepersons overlevelse videospil Lang mørk kan være bedragerisk vanskeligt at fange. Stilen..

Sådan opretter du realistisk CG klud

hvordan Sep 13, 2025

Når du arbejder med klud og stof i 3D, kan det være svært at opnå både god opløsning og et godt udseende. Dit arbejde kan s..

Opret perfekte beskeder i alle e-mail-klienter

hvordan Sep 13, 2025

For enhver e-mail marketingkampagne til arbejde skal e-mailen nå indbakken og skille sig ud fra de alle de andre. Men historien slutter ikke der. Din email skal gøre godt, hvis du vil have ..

Kategorier