CSS Grid -generaattori
Suunnittele CSS Grid -asetteluja visuaalisesti: määritä sarakkeet, rivit ja väli, ja kirjoita sitten aluenimiä soluihin rakentaaksesi grid-template-areasin – reaaliaikaisella esikatselulla ja kopioitavalla CSS- ja HTML-koodilla.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
Grid-template-areas -määrittely on yksi CSS:n luettavimmista osista, mutta vasta kun se on olemassa – käsin tehtynä se tarkoittaa lainausmerkkijonojen laskeskelua ja rivien pituuksien täsmäyttämistä, ja yksikin väärä solu rikkoo koko asettelun äänettömästi. Tämä generaattori muuttaa sen suoraksi manipuloinniksi: aseta sarake- ja rivimäärät, kirjoita nimi mihin tahansa reaaliaikaisen ruudukon soluun, ja samannimiset solut yhdistyvät automaattisesti yhdeksi nimetyksi alueeksi.
Konepellin alla jokainen solu, jonka jätät tyhjäksi, muuttuu pisteeksi generoidussa grid-template-areas -merkkijonossa, ja jokaisesta nimeämästäsi solusta tulee osa kyseisen nimen suorakulmiota. CSS sallii nimetyn alueen miehittävän vain yhden siistin suorakulmaisen lohkon, joten työkalu tarkistaa sen kirjoittaessasi ja kertoo tarkalleen, milloin nimi ei vielä muodosta validia suorakulmiota – sen sijaan että tuottaisi hiljaa CSS:ää, jonka selain hylkää.
Sarakeväli- ja riviväli-oletusarvo on 8px, ja ne yhdistyvät yhdeksi gap-riviksi, kun ne täsmäävät. Reaaliaikainen esikatseluruudukko heijastaa aina grid-template-columns- ja grid-template-rows-raiteita, mukaan lukien kiinteät pikselisarakkeet valmiista mallista, kuten pyhän maljan 200px sivukaiteet. Kopioitava tuotos kattaa molemmat puolet: CSS-lohkon valmiina tyylitiedostoosi ja vastaavan HTML-rungon, jossa on yksi grid-area-div jokaista nimettyä aluetta kohti.
Grid ja flexbox ratkaisevat erilaisia asetteluongelmia, ja tämän sivuston css-flexbox-generator on parempi lähtökohta yksiulotteisiin asetteluihin – yhteen joustavien elementtien riviin tai sarakkeeseen, kuten navigointipalkki tai korttipino. Turvaudu tähän grid-generaattoriin, kun tarvitset kaksiulotteista hallintaa, eksplisiittisiä rivejä ja sarakkeita tai nimettyjä alueita, kuten header/nav/main/footer; nämä kaksi työkalua päätyvät usein samalle sivulle, grid sivun runkoon ja flexbox sen palasten sisälle. Kuten jokainen työkalu tällä sivustolla, se toimii kokonaan selaimessasi – ei tiedostojen lähetystä, ei tiliä.