Kuinka luoda yksinkertainen lomake CSS-ruudukolla

Opit luomaan yksinkertaisen lomakkeen Flexboxilla edellisessä artikkelissa. Tänään ymmärrät kuinka luoda sama asia CSS Gridillä.

Tässä on mitä rakennamme:

Lomakkeen rakentaminen CSS Gridillä

Yllä olevasta kuvasta tiedämme, että lomake sisältää kaksi elementtiä:

  1. Sähköpostikenttä
  2. Lähetä-painike

Tässä on HTML:

  Send 

Jos haluat rakentaa lomakkeen CSS-ruudukolla, sinun on määritettävä vanhemman displayominaisuudeksi grid.

form { display: grid; }

Tässä on mitä saat:

Miksi saimme kaksi riviä?

Saamme kaksi riviä, koska emme ole määrittäneet ruudukon sarakkeiden määrää. Selaimet käyttävät aina oletusarvoisesti yhtä saraketta.

Tätä lomaketta varten meidän on asetettava kaksi saraketta.

  1. Ensimmäisen sarakkeen tulisi laajentua täyttämään kaikki käytettävissä olevat tilat
  2. Toinen sarake tulisi mitoittaa sen sisällön mukaan

Ensimmäisessä sarakkeessa voimme käyttää fryksikköä. Toisessa sarakkeessa voimme käyttää auto.

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

Tämän avulla olet täyttänyt lomakkeen asettelun. Tässä on Codepen, jolla voit leikkiä:

Zell Liew (@zellwk) yksinkertainen lomake CSS-ruudukolla CodePenillä.

Kun elementit ovat eriarvoisia

Simuloidaan epätasaista korkeutta sisältäviä elementtejä korvaamalla buttontekstin SVG: llä. Tämä on sama kuin mitä olemme tehneet edellisessä artikkelissa.

Huomaa, että inputkorkeus kasvaa myös suuren SVG-kuvakkeen mukaan! Jälleen kerran meidän ei tarvitse kirjoittaa mitään ylimääräistä koodia. Tämä tapahtuu, koska ruudukon osat venytetään pystysuunnassa täyttämään kaikki käytettävissä olevat tilat.

Jos haluat muuttaa tätä, voit muuttaa align-itemskiinteistön joko start, endtai center.

Tässä on Codepen, jolla voit leikkiä:

Yksinkertainen muoto CSS Gridillä (SVG-painikkeella), kirjoittanut Zell Liew (@zellwk) CodePenillä.

Käärimistä

CSS Grid helpottaa asettelujen luomista. Sitä ei tarvitse käyttää makroasettelussa. Sitä voidaan käyttää myös mikroasettelussa, kuten täällä nähty lomake.

Pidä hauskaa CSS Gridin kanssa!

Kiitos lukemisesta. Auttoiko tämä artikkeli millään tavalla? Jos teit, toivon, että harkitset sen jakamista. Saatat auttaa jotakuta ulos. Kiitos!

Tämä artikkeli julkaistiin alun perin blogissani.

Ilmoittaudu uutiskirjeeseen, jos haluat lisää artikkeleita, joiden avulla voit tulla paremmaksi käyttöliittymän kehittäjäksi.