Hvordan bygge Web Form Layouts med CSS Grid

I denne opplæringen vil vi utforske hvordan du bygger et par forskjellige webformer ved hjelp av CSS Grid. For hvert eksempel vil vi først bruke flyter, og deretter se hvordan samme layout kunne gjøres ved hjelp av CSS Grid.

Hvis du ikke har noen tidligere kunnskaper om CSS-nett, ta en titt på vår nybegynnerserie Understanding the CSS Grid Layout Module. La oss begynne!

1. Grunnleggende påmeldingsskjema

I dette oppsettet skal vi dele skjemaet i to kolonner, slik at vi kan vise etikettene til venstre, og inntastingsfeltene til høyre. 

Med "Tradisjonell" CSS

En tradisjonell tilnærming til dette oppsettet kan bruke flyter til å gi oss våre kolonner. Legg merke til at vi ikke har et omslag for skjemaelementet; Vi vil direkte stile etikettene og inngangene.

 Fornavn  Etternavn   

skjema overflow: hidden;  label float: left; bredde: 200px; polstring-høyre: 24px;  input float: left; bredde: calc (100% - 200px);  knappen float: right; bredde: calc (100% - 200px); 

Du vil legge merke til at vi bruker calc () her, som gjør at vi kan gjøre venstre kolonne fast til 200px bred, mens høyre kolonne forblir flytende.

Her er resultatet, med noen flere stilarter for estetikk:

Med CSS Grid Layout

Vårt mål når du bruker "Grid" er å definere to kolonner, og deretter plassere hvert element i den nødvendige kolonnen.

Det første trinnet er å definere vårt rutenett på foreldreelementet skjema:

skjema display: grid; 

Da må vi dele det rutenettet ved hjelp av gitter-mal-kolonner:

skjema display: grid; rutenett-mal-kolonner: 200px 1fr; 

Basert på ovenstående CSS, vil den første kolonnen ha en fast bredde på 200px mens den andre vil ta 1fr ("En brøkdel") av gjenværende ledig plass.

Vi må nå definere plasseringen for våre etiketter og innganger. For å gjøre det, vil vi bruke gitter-kolonne med spesifikke verdier for rutenettene:

For mer om hvordan gridlinjer fungerer, ta en titt på dette raske tipset:

• 

  Rask Tips: Navn CSS-rutenettene, bare i sak

  I et hvilket som helst CSS-nett har hver linje et indeksnummer som vi kan referere til å plassere rutenettelementer. Vi kan imidlertid også nevne hver av disse rutenettene, noe som gjør det til ...

Basert på disse rutenettlinjer, vil vi bruke følgende regler for våre etiketter, innganger og knappen:

etikett grid-column: 1/2;  input, button grid-column: 2/3; 

Etikettene finner seg i kolonnen som begynner på linje 1 og slutter på linje 2. Inngangene og knappen vil bli plassert i kolonnen som begynner på linje 2 og ender på linje 3.

Til slutt bruker vi gitter-gap å legge til en rende på 16px mellom radene og kolonnene:

skjema display: grid; rutenett-mal-kolonner: 200px 1fr; grid-gap: 16px; 

2. Kontaktskjema

I dette oppsettet ønsker vi å oppnå følgende:

1. Kolonnehøyder skal være like, så sidebjelken og formpakken er i samme høyde.
2. Vi vil videre dele skjemaet (høyre side) i to kolonner, endre knappen slik at den fyller full bredde.

Det er helt mulig å bygge dette oppsettet ved hjelp av flyter. Imidlertid må vi sette en min-høyde for den venstre kolonnen, ellers vil den ikke anta hele høyden. Det er andre "tradisjonelle" tilnærminger til dette problemet, men ingen er spesielt pen.

Med "Tradisjonell" CSS

For å oppsummere, med flyter må vi:

1. Legg til min-høyde til venstre kolonne.
2. Flytt kontakten og form emballasje.
3. Legg til en clearfix eller overløp: skjult; for å bevare innpakningshøyden.
4. Flytt formelementene og legg til marginer mellom dem.
5. Tilbakestill flytende for textarea og send-knappen, og la dem fylle hele bredden.

Det er ganske mye arbeid, ikke sant?

En bedre tilnærming ville være å løse dette med enten Flexbox eller Grid. I dette tilfellet foretrekker jeg å bruke Grid siden vi ordner elementer både horisontalt og vertikalt.

Med CSS Grid Layout

La oss begynne med å erklære et rutenett på vår wrapper og dele den i to kolonner.

.wrapper display: grid; rutenett-mal-kolonner: 1fr 2fr; 

Vårt formelement også må bli erklært et rutenett:

skjema display: grid; rutenettmall-kolonner: 1fr 1fr; grid-gap: 20px; 

Etter at du har brukt ovennevnte regler, får vi følgende:

Vi må la de to siste elementene fylle hele bredden ved å strekke dem fra rutenett 1 til rutenett 3.

.full bredde grid-column: 1/3; 

3. Profilformular

Tid for vårt siste formoppsett. I dette eksemplet har vi tatt med en inngang for brukere å laste opp profilbildet sitt. Den skal plasseres øverst til høyre.

Med "Tradisjonell" CSS

Vi bygger dette med følgende oppmerkning:

 
 Navnet ditt  
 
 e-post  
 
 Last opp bildet ditt  
 
 Lagre 
 

Kortfattet dekker en tradisjonell tilnærming, vi kan oppnå vårt layout med disse trinnene:

1. Legg til stilling: relativ; til skjemaelementet.
2. Still posisjonen filinngangen øverst til høyre. 
3. Legg utfylling til skjemaet med samme bredde som filinngangen.
4. Angi en fast bredde for filinngangen.

Med CSS Grid Layout

La oss ikke dvele på den tradisjonelle tilnærmingen for mye. Med Grid, deler vi skjemaet i to kolonner som følger:

Den første kolonnen tar to ganger det horisontale rommet i den andre kolonnen, som vi vil oppnå ved bruk av fr enheter:

skjema display: grid; grid-template-kolonner: 2fr 1fr; grid-gap: 20px; 

Etter å ha etablert rutenett, må vi legge formelementene mellom rutenett 1 og rutenett 2:

skjema p grid-kolonne: 1/2; 

Det neste trinnet er å legge inn filen i den andre kolonnen. For å gjøre det, plasserer vi det mellom rutenett 2 og rutenett 3. Når vi beveger seg vertikalt, vil vi få det til å spenne rader fra rutenett 1 til rutenett 2.

.input-file-wrapper grid-column: 2/3; rutenett: 1/2; 

Konklusjon

Bra gjort! Vi har dekket flere forskjellige eksempler for bruk av CSS-nettverket når du bygger webformer. Som du har lagt merke til, lagret vi mye tid og krefter ved å skrive noen linjer med kode, i motsetning til bruk av tradisjonelle layoutteknikker. Du kan bruke alle eksemplene ovenfor som starter i dag, takket være CSS @supports som hjelper oss med å bruke en bestemt funksjon som en forbedring. 

• 

  Rask tips: Legg til en @supports CSS-fil til dine CodePen-demoer

  Når CodePen-demoer er avhengige av cutting edge CSS, er det en god ide å advare folk. La oss gi et varsel når nettlesere ikke støtter våre demoer, ved hjelp av ...

Har du forslag til forbedring av disse layoutene? Gi meg beskjed i kommentarene nedenfor!