Hogyan hozzunk létre egy egyszerű űrlapot a CSS Grid segítségével

Az előző cikkben megtanult egy egyszerű űrlapot létrehozni a Flexbox segítségével. Ma meg fogja érteni, hogyan hozhatja létre ugyanazt a CSS Griddel.

A következőt építjük:

Az űrlap felépítése a CSS Grid segítségével

A fenti kép alapján tudjuk, hogy az űrlap két elemet tartalmaz:

  1. E-mail mező
  2. Küldés gomb

Itt van a HTML:

  Send 

Az űrlap CSS Grid használatával történő létrehozásához be kell állítania a szülő displaytulajdonságát grid.

form { display: grid; }

Íme, amit kap:

Miért kaptunk két sort?

Két sort kapunk, mert nem adtuk meg a rács oszlopainak számát. A böngészők alapértelmezés szerint mindig egy oszlopot használnak.

Ehhez az űrlaphoz két oszlopot kell beállítanunk.

  1. Az első oszlopnak ki kell bővülnie, hogy feltöltse a rendelkezésre álló helyet
  2. A második oszlopot tartalmának megfelelően kell méretezni

Az első oszlophoz használhatjuk az fregységet. A második oszlophoz használhatjuk auto.

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

Ezzel elkészült az űrlap elrendezése. Itt van egy Codepen, amellyel játszhatsz:

Egyszerű űrlap CSS Griddel, Zell Liew (@zellwk) a CodePen-en.

Amikor az elemek egyenlőtlen magasságúak

Szimuláljuk az egyenlőtlen magasságú elemeket úgy, hogy a button's szöveget SVG-vel helyettesítjük . Ez ugyanaz, mint amit az előző cikkben tettünk.

Vegye figyelembe, hogy a inputmagassága megnő, hogy illeszkedjen a nagy SVG ikonhoz is! Még egyszer: nem kell külön kódot írnunk. Ez azért történik, mert a rácselemeket függőlegesen nyújtják, hogy feltöltsék a rendelkezésre álló helyet.

Ha meg akarja változtatni ezt a viselkedést, meg lehet változtatni a align-itemstulajdonságot sem start, endvagy center.

Itt van egy Codepen, amellyel játszhatsz:

Zell Liew (@zellwk) CSP-rácsos (SVG gombos) egyszerű űrlapja a CodePen-en.

Csomagolás

A CSS Grid megkönnyíti az elrendezések létrehozását. Nem kell makróelrendezésekhez használni. Mikroelrendezésekhez is használható, például az itt látható formapéldához.

Jó szórakozást a CSS Griddel!

Köszönöm, hogy elolvasta. Segített valamilyen módon ez a cikk? Ha mégis, remélem, megfontolja a megosztását. Lehet, hogy segít valakinek. Köszönöm!

Ezt a cikket eredetileg a blogomon tették közzé .

Iratkozzon fel a hírlevelemre, ha további cikkeket szeretne kapni, amelyek jobb előtér-fejlesztőkké válhatnak.