O grilă poate fi definită ca un set care se intersectează de linii verticale și orizontale. Aspectul CSS Grid separă o pagină în secțiuni majore. Proprietatea Grid oferă un sistem de aspect bazat pe grilă, având rânduri și coloane. Face proiectarea paginilor web ușoară, fără poziționare și plutire. Aspectul grilei ne oferă o modalitate de a crea structuri de grilă descrise în CSS, nu în HTML.

Similar cu tabelul, acesta permite utilizatorului să alinieze elementele în rânduri și coloane. Dar, în comparație cu tabelele, este ușor să proiectați aspectul cu grila CSS. Putem defini coloane și rânduri pe grilă folosind rânduri-șablon-grilă și grilă-șablon-coloane proprietăți.

Un container grilă poate fi creat prin declararea afișaj: grilă sau display: inline-grid pe un element. Containerul grilă conține elementele unei grile care sunt plasate în interiorul rândurilor și coloanelor.

curățați memoria cache npm

Grilă v/s Flexbox

Este o întrebare obișnuită care apare în general că modul în care grila este diferită de flexbox. Grila este pentru layout-uri bidimensionale (rânduri și coloane în același timp), în timp ce flexbox-ul este utilizat pentru layout-uri unidimensionale (fie într-un rând sau coloană). Flexbox este folosit atunci când orice trebuie să fie în linie dreaptă.

Flexbox este folosit pentru aranjarea elementelor într-o singură coloană sau pe un singur rând. Pe de altă parte, grila este cea mai bună pentru a aranja elementele în mai multe coloane și rânduri.

Să înțelegem grila în CSS folosind un exemplu.

Exemplu

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Ieșire