CSS Grid Generator

Grid-template-alue-ilmoitus on yksi luettavimmista CSS:n osista, mutta vain kerran, kun se on olemassa – käsin pääseminen tarkoittaa lainattujen merkkijonojen laskemista ja rivien pituuden täsmäämistä, ja yksi yhteensopimaton solu rikkoo hiljaa koko asettelun. Tämä generaattori muuttaa sen suoraksi käsittelyksi: aseta sarakkeiden ja rivien määrä, kirjoita nimi mihin tahansa live-ruudukon soluun, ja vastaavat nimet sulautuvat yhdeksi nimetyksi alueeksi automaattisesti.

Kannen alla jokainen tyhjäksi jättämäsi solu muuttuu pisteeksi luodussa grid-template-alues-merkkijonossa, ja jokaisesta nimeämästäsi solusta tulee osa nimen suorakulmiota. CSS sallii nimetyn alueen varata vain yhden puhtaan suorakaiteen muotoisen lohkon, joten työkalu tarkistaa sen kirjoittaessasi ja kertoo tarkalleen, milloin nimi ei vielä muodosta kelvollista suorakulmiota – sen sijaan, että selain tuottaisi CSS:ää hiljaa, se hylkää sen.

Sarakevälin ja rivivälin oletusarvo on 8 pikseliä, ja ne yhdistetään yhdeksi aukkoviivaksi, kun ne täsmäävät, ja live-esikatseluruudukko peilaa aina ruudukkomalli-sarakkeet ja ruudukkomallirivit, mukaan lukien kiinteät pikselisarakkeet esiasetuksista, kuten pyhän graalin 200 pikselin sivukiskot. Kopioitava tuloste kattaa molemmat puolet: CSS-lohkon valmiina tyylisivullesi ja vastaavan HTML-rungon, jossa on yksi ruudukkoalueen div per nimetty alue.

Grid ja flexbox ratkaisevat erilaisia asetteluongelmia, ja tämän sivuston css-flexbox-generaattori on parempi lähtökohta yksiulotteisille asetteluille – yksi rivi tai sarake joustavia kohteita, kuten navigointipalkki tai korttipino. Käytä tätä ruudukkogeneraattoria sen sijaan, kun tarvitset kaksiulotteista ohjausta, eksplisiittisiä rivejä ja sarakkeita tai nimettyjä alueita, kuten header/nav/main/footer; molemmat työkalut päätyvät usein samalle sivulle, sivun kuoren ruudukkoon ja flexboxiin sen osien sisällä. Kuten kaikki tämän sivuston työkalut, se toimii kokonaan selaimessasi – ei latausta, ei tiliä.