Što je CSS Grid?
CSS Grid Layout je dvodimenzionalni sustav rasporeda ugrađen u moderne preglednike. Definirate kontejner rešetke s display: grid, zatim kontrolirate stupce s grid-template-columns i retke s grid-template-rows. Razlomkove jedinice (fr) proporcionalno raspoređuju dostupni prostor. Podređene stavke mogu obuhvaćati više stupaca ili redaka koristeći grid-column: span N i grid-row: span N.
Kako koristiti CSS Grid Generator
-
Postavite broj stupaca i redaka pomoću numeričkih unosa (1–12 za svaki).
-
Prilagodite grid-template-columns i grid-template-rows za kontrolu veličina (npr. 1fr 2fr, 200px auto).
-
Postavite razmak između ćelija (npr. 10px, 1rem).
-
Kliknite na bilo koju ćeliju u pregledu da je odaberete (postaje narančasta).
-
Postavite col-span i row-span u ploči Raspon ćelije, zatim kliknite Primijeni. Ćelije s rasponom postaju zelene.
-
Kliknite na karticu CSS ili HTML za promjenu formata izlaza, zatim kopirajte u međuspremnik.
-
Kliknite Poništi sve da počnete ispočetka s novom rešetkom 3×3.