Generator CSS Grid
Generatorul CSS Grid construiește layout-uri de tip grilă pornind de la numărul de coloane și rânduri, spații, valori grid-template personalizate opționale și alinierea elementelor, cu previzualizare live și CSS gata de copiat.
Despre acest instrument
Generatorul CSS Grid construiește layout-uri de tip grilă pornind de la numărul de coloane și rânduri, spații, valori grid-template personalizate opționale și alinierea elementelor, cu previzualizare live și CSS gata de copiat.
Cum se folosește
- Setează numărul de coloane și de rânduri.
- Ajustează spațiile dintre coloane și dintre rânduri.
- Opțional, introdu template-uri personalizate precum 200px 1fr 1fr.
- Alege justify-items și align-items, apoi apasă Copy CSS.
Bine de știut
- Unitatea fr împarte spațiul liber: 1fr 2fr îi dă celei de-a doua coloane de două ori lățimea primei.
- repeat(3, 1fr) este prescurtarea pentru trei coloane egale.
- column-gap și row-gap setează spațiile dintre piste.
- Grid este bidimensional și controlează împreună rândurile și coloanele.
- repeat(auto-fit, minmax(200px, 1fr)) creează o grilă responsivă fără media queries.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum creez o grilă cu 3 coloane în CSS?
Folosește display: grid; grid-template-columns: repeat(3, 1fr); pe container și adaugă un gap pentru spațiere.
Ce înseamnă fr în CSS Grid?
fr este o fracțiune din spațiul liber disponibil în containerul grid.
CSS Grid sau Flexbox?
Grid este cel mai potrivit pentru layout-uri bidimensionale, precum structuri de pagină și grile de carduri; Flexbox pentru rânduri sau coloane unidimensionale.
Cum fac o grilă responsivă fără media queries?
Folosește grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); coloanele se încadrează apoi automat în funcție de spațiul disponibil.