Cum se construiesc layere de formular web cu grila CSS

În acest tutorial vom explora cum să construim câteva forme de web diferite folosind Gridul CSS. Pentru fiecare exemplu vom folosi mai întâi flotoare și apoi vom vedea cum ar putea fi realizat același aspect folosind Gridul CSS.

Dacă nu aveți cunoștințe anterioare despre grila CSS, aruncați o privire la seria noastră de începători Înțelegerea modulului CSS Grid Layout. Sa incepem!

1. Formular de înscriere de bază

În acest aspect, vom diviza formularul în două coloane, astfel încât să putem afișa etichetele din stânga și câmpurile de introducere din dreapta. 

Cu CSS "tradițional"

O abordare tradițională a acestui aspect ar putea folosi flotoare pentru a ne oferi coloanele noastre. Observați că nu avem un înveliș pentru elementul de formular; vom modela direct etichetele și intrările.

 Nume  Numele de familie   

forma overflow: hidden;  etichetă float: left; lățime: 200px; padding-right: 24px;  intrare float: left; lățime: calc (100% - 200px);  butonul float: right; lățime: calc (100% - 200px); 

Veți observa că o folosim calc () aici, care ne permite să facem coloana stângă fixată la 200px lățime, în timp ce coloana din dreapta rămâne fluidă.

Iată rezultatul, cu câteva stiluri suplimentare pentru estetică:

Cu structura CSS Grid

Scopul nostru atunci când folosim "Grid" este definirea a două coloane și apoi plasarea fiecărui element în coloana necesară.

Primul pas este să definiți grila noastră pe elementul părinte formă:

forma display: grilă; 

Apoi, trebuie să împărțim grila folosind grilă matriță coloane:

forma display: grilă; grilă-șablon-coloane: 200px 1fr; 

Pe baza CSS de mai sus, prima coloană va avea o lățime fixă ​​de 200px în timp ce al doilea va lua 1fr ("O fracțiune") a spațiului disponibil.

Acum trebuie să definim destinația de plasare pentru etichetele și intrările noastre. Pentru a face acest lucru, vom folosi grilă coloană cu valori specifice pentru liniile de rețea:

Pentru mai multe informații despre modul în care funcționează liniile de rețea, aruncați o privire la acest sfat rapid:

• 

  Sfat rapid: denumiți liniile dvs. de rețea CSS, doar în caz

  În orice rețea CSS, fiecare linie are un număr de index pe care îl putem referi la elemente de rețea. Cu toate acestea, putem numi, de asemenea, fiecare dintre aceste linii ...

Pe baza acestor linii de grilă, vom aplica următoarele reguli pentru etichetele, intrările și butonul nostru:

etichetă grilă-coloană: 1/2;  intrare, buton grid-coloană: 2/3; 

Etichetele se vor afla în coloana care începe pe linia 1 și se termină pe linia 2. Intrările și butoanele vor fi plasate în coloana care începe pe linia 2 și se va termina pe linia 3.

În cele din urmă, vom folosi grid-gap pentru a adăuga un jet de 16px între rânduri și coloane:

forma display: grilă; grilă-șablon-coloane: 200px 1fr; grilă-decalaj: 16 pixeli; 

2. Formular de contact

În acest aspect vrem să realizăm următoarele:

1. Înălțimea coloanelor ar trebui să fie egală, astfel încât bara laterală și învelișul de formă să aibă aceeași înălțime.
2. Vrem să împărțim în continuare forma (partea dreaptă) în două coloane, modificând butonul astfel încât să umple lățimea completă.

Este perfect posibil să construiți acest aspect folosind flotoare. Cu toate acestea, va trebui să setăm o min înălțime pentru coloana din stânga, altfel nu va preia înălțimea completă. Există și alte abordări "tradiționale" în această problemă, dar nici una nu este deosebit de frumoasă.

Cu CSS "tradițional"

Pentru a rezuma, cu flotoare trebuie:

1. Adăuga min înălțime în coloana din stânga.
2. Împingeți contactul și împachetați-l.
3. Adăugați o clarificare clară sau overflow: ascuns; pentru a păstra înălțimea învelișului.
4. Deplasați elementele de formă și adăugați margini între ele.
5. Resetați plutitorul pentru textarea și trimiteți butonul, apoi le faceți să umple întreaga lățime.

E un pic de lucru, corect?

O abordare mai bună ar fi rezolvarea acestei situații fie cu Flexbox, fie cu Grid. În acest caz special, aș prefera să folosesc Gridul deoarece aranjăm elemente atât orizontal cât și vertical.

Cu structura CSS Grid

Să începem prin a declara o grilă pe ambalajul nostru și o împărțim în două coloane.

.înveliș display: grilă; grilă-șablon-coloane: 1fr 2fr; 

Elementul nostru de formă de asemenea trebuie să fie declarată o rețea:

forma display: grilă; grilă-șablon-coloane: 1fr 1fr; grilă-decalaj: 20 pixeli; 

După aplicarea regulilor de mai sus, vom obține următoarele:

Trebuie să lăsăm ultimele două elemente să umple lățimea maximă prin întinderea lor de la linia de rețea 1 până la linia 3 a rețelei.

.full-width grilă-coloană: 1/3; 

3. Formular de profil

Timpul pentru ultimul nostru aspect. În acest exemplu, am inclus o intrare pentru ca utilizatorii să-și încarce fotografia de profil. Ar trebui să fie plasat în partea dreaptă sus.

Cu CSS "tradițional"

Vom construi acest lucru cu următorul marcaj:

 
 Numele dumneavoastră  
 
 E-mail  
 
 Incarca-ti fotografia  
 
 Salvați 
 

Pe scurt, acoperind o abordare tradițională, putem realiza aspectul nostru cu acești pași:

1. Adăuga poziție: relativă; la elementul de formă.
2. Poziționați pozitiv intrarea fișierului în partea dreaptă sus. 
3. Adăugați completarea la formularul cu aceeași lățime ca intrarea fișierului.
4. Specificați o lățime fixă ​​pentru intrarea fișierului.

Cu structura CSS Grid

Să nu abordăm prea mult abordarea tradițională. Cu Grid, vom împărți formularul în două coloane după cum urmează:

Prima coloană va dura de două ori spațiul orizontal al celei de-a doua coloane, pe care o vom realiza folosind fr Unități:

forma display: grilă; grilă-șablon-coloane: 2fr 1fr; grilă-decalaj: 20 pixeli; 

După crearea rețelei, trebuie să plasăm elementele de formă între linia 1 și linia 2:

forma p grilă-coloană: 1/2; 

Următorul pas este plasarea fișierului de intrare în a doua coloană. Pentru a face acest lucru, îl vom plasa între linia de grilă 2 și linia grilei 3. Deplasând vertical, vom face ca rândurile să se întindă de la linia de rețea 1 până la linia 2 a rețelei.

.intrări-file-wrapper grilă-coloană: 2/3; grilă-rând: 1/2; 

Concluzie

Foarte bine! Am realizat mai multe exemple diferite de utilizare a rețelei CSS atunci când construim formulare web. După cum ați observat, am salvat o mulțime de timp și efort scriind câteva linii de cod, spre deosebire de tehnicile tradiționale de aspect. Puteți folosi toate exemplele de mai sus începând de astăzi, grație CSS @supports care ne ajută să folosim o caracteristică specifică ca accesoriu. 

• 

  Sfat rapid: Adăugați un fișier CSS @supports la demonstrațiile CodePen

  Când demo-urile CodePen se bazează pe CSS, este o idee bună să avertizezi oamenii. Să oferim o notificare când browserele nu acceptă demonstrațiile noastre, folosind ...

Aveți sugestii pentru a îmbunătăți aceste machete? Anunță-mă în comentariile de mai jos!