Mikä on CSS Grid?
CSS Grid Layout on kaksiulotteinen asettelujärjestelmä, joka on sisäänrakennettu moderneihin selaimiin. Määrität ruudukkosäiliön käyttämällä display: grid, ja hallitset sitten sarakkeita grid-template-columns-ominaisuudella ja rivejä grid-template-rows-ominaisuudella. Murto-osayksikköä (fr) käyttämällä vapaa tila jaetaan suhteellisesti. Lapsialkiot voivat ulottua useille sarakkeille tai riveille käyttämällä grid-column: span N ja grid-row: span N.
CSS Grid -generaattorin käyttöohje
-
Aseta sarakkeiden ja rivien määrä numerokentillä (1–12 kumpikin).
-
Säädä grid-template-columns ja grid-template-rows kokojen hallitsemiseksi (esim. 1fr 2fr, 200px auto).
-
Aseta solujen välinen väli (esim. 10px, 1rem).
-
Napsauta mitä tahansa solua esikatselussa valitaksesi sen (muuttuu oranssiksi).
-
Aseta col-span ja row-span Solulaajuus-paneelissa, napsauta sitten Käytä. Laajentuvat solut muuttuvat vihreiksi.
-
Napsauta CSS- tai HTML-välilehteä vaihtaaksesi tulostusmuotoa, kopioi sitten leikepöydälle.
-
Napsauta Nollaa kaikki aloittaaksesi alusta uudella 3×3-ruudukolla.