Sådan oprettes en enkel form med CSS Grid

Du lærte at oprette en enkel form med Flexbox i den foregående artikel. I dag forstår du, hvordan du opretter det samme med CSS Grid.

Her er hvad vi bygger:

Opbygning af formularen med CSS Grid

Fra billedet ovenfor ved vi, at formularen indeholder to elementer:

  1. Et e-mail-felt
  2. En send-knap

Her er HTML:

  Send 

For at oprette formularen med CSS Grid skal du indstille forældrenes displayejendom til grid.

form { display: grid; }

Her er hvad du får:

Hvorfor fik vi to rækker?

Vi får to rækker, fordi vi ikke specificerede antallet af kolonner til gitteret. Browsere har altid som standard en kolonne.

Til denne formular skal vi indstille to kolonner.

  1. Den første kolonne skal udvides for at udfylde ledig plads
  2. Den anden kolonne skal dimensioneres i henhold til dens indhold

I den første kolonne kan vi bruge frenheden. I den anden kolonne kan vi bruge auto.

form { display: grid; grid-template-columns: 1fr auto; }

Med dette har du gennemført formularens layout. Her er en Codepen, som du kan lege med:

Enkel form med CSS Grid af Zell Liew (@zellwk) på CodePen.

Når elementerne er af forskellig højde

Vi simulerer elementer med ulige højder ved at erstatte buttonteksten med en SVG. Dette er det samme som hvad vi har gjort i den foregående artikel.

Læg mærke til, at inputhøjden øges, så den også passer til det store SVG-ikon! Endnu en gang behøver vi ikke skrive nogen ekstra kode. Dette sker, fordi gitterelementer strækkes lodret for at fylde ledig plads.

Hvis du ønsker at ændre denne adfærd, kan du ændre align-itemsejendommen til enten start, endeller center.

Her er en Codepen, som du kan lege med:

Enkel form med CSS Grid (med SVG-knap) af Zell Liew (@zellwk) på CodePen.

Afslutter

CSS Grid gør det let at oprette layout. Det behøver ikke bruges til makrolayouts. Det kan også bruges til mikrolayouter som det formeksempel, du har set her.

Hav det sjovt med CSS Grid!

Tak for læsningen. Hjalp denne artikel dig på nogen måde? Hvis du gjorde det, håber jeg, at du overvejer at dele det. Du kan måske hjælpe nogen ud. Tak skal du have!

Denne artikel blev oprindeligt sendt på min blog.

Tilmeld dig mit nyhedsbrev, hvis du vil have flere artikler, der hjælper dig med at blive en bedre front-end-udvikler.