Mis on CSS Grid?
CSS Grid Layout on kahedimensionaalne paigutussüsteem, mis on sisse ehitatud kaasaegsetesse brauseritesse. Määrate ruudustiku konteineri kasutades display: grid, seejärel juhite veerge grid-template-columns ja ridu grid-template-rows abil. Murdarv ühikud (fr) jaotavad vaba ruumi proportsionaalselt. Alamüksused saavad hõlmata mitut veergu või rida kasutades grid-column: span N ja grid-row: span N.
Kuidas kasutada CSS Grid Generaatorit
-
Määrake veergude ja ridade arv numbriväljadega (1–12 kummalegi).
-
Kohandage grid-template-columns ja grid-template-rows suuruste juhtimiseks (nt. 1fr 2fr, 200px auto).
-
Määrake lahtrite vaheline vahe (nt. 10px, 1rem).
-
Klõpsake eelvaates suvalises lahtris selle valimiseks (muutub oranžiks).
-
Määrake col-span ja row-span lahtri ulatuse paneelil, seejärel klõpsake Rakenda. Ulatusega lahtrid muutuvad roheliseks.
-
Klõpsake CSS või HTML vahekaardil väljundi vormingu vahetamiseks, seejärel kopeerige lõikelauale.
-
Klõpsake Lähtesta kõik, et alustada uuesti uue 3×3 ruudustikuga.