Readdy logo

CSS Grid -generaattori

Suunnittele CSS Grid -asettelu visuaalisesti: säädä sarakkeet, rivit ja välit, luo alueet soluista ja kopioi koodi

Ruudukon esikatselu

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3

Luotu CSS

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Näin käytät CSS Grid -generaattoria

CSS Grid on CSS:n tehokkain asettelujärjestelmä. Visuaalinen generaattori auttaa luomaan monimutkaiset ruudukot säätämällä asetuksia ja valitsemalla alueet soluista. Kopioi lopuksi koodi suoraan projektiisi.

1

Määritä sarakkeet ja rivit

Valitse ruudukon sarakkeiden ja rivien määrä. Säädä rakennetta numerokentillä.

2

Aseta koot ja välit

Määritä sarakkeiden leveydet ja rivien korkeudet CSS-yksiköillä (fr, px, %, auto jne.). Aseta solujen välinen rako.

3

Valitse alueet napsauttamalla

Merkitse soluja nimetyiksi ruudukkoalueiksi. Jokaisesta valitusta solusta tulee oma alue luodussa CSS:ssä.

4

Kopioi koodi

Kopioi luotu CSS Kopioi koodi -painikkeella, liitä tyylitiedostoosi ja aloita asettelun rakentaminen heti.

Miksi käyttää CSS Grid -generaattoriamme

Älä kirjoita ruudukon CSS:ää käsin. Suunnittele visuaalisesti, näe asettelu reaaliajassa ja kopioi käyttövalmis koodi yhdellä napsautuksella.

  • Visuaalinen suunnittelu napsauttamalla

    Näe ruudukko rakentaessasi. Nimeä alueet soluja napsauttamalla: grid-template-areas-rakennetta ei tarvitse kuvitella mielessä.

  • Joustava yksikkötuki

    Käytä CSS-yksiköitä fr, px, %, em, rem, auto, minmax(), repeat() ja muita. Yhdistä yksiköitä responsiivisiin asetteluihin.

  • Välitön koodinluonti

    Saat tuotantovalmiin CSS:n heti suunnittelun jälkeen. Ei käsin koodaamista tai syntaksivirheitä: kopioi ja liitä suoraan.

  • Ruudukkoalueiden nimeäminen

    Valitse soluista nimetyt alueet. Generaattori kirjoittaa grid-template-areas-määritykset puolestasi luettavaan ja ylläpidettävään CSS:ään.

Usein kysytyt kysymykset

CSS Grid on kaksiulotteinen CSS-asettelujärjestelmä, jolla järjestät elementit samanaikaisesti riveihin ja sarakkeisiin. Tämä tehokas työkalu sopii vaativiinkin sivurakenteisiin.
Sen avulla nimeät ruudukon alueet ja liität elementit nimiin. Asettelukoodi on selkeää: rivien ja sarakkeiden laskemisen sijaan viittaat suoraan alueisiin kuten header, sidebar ja main.
Voit käyttää kaikkia kelvollisia CSS-yksiköitä, kuten fr, px, %, em, rem, auto, minmax() ja repeat(). Yleinen fr-yksikkö jakaa käytettävissä olevan tilan suhteellisesti.
Kyllä. CSS Grid -generaattori on täysin ilmainen ilman rekisteröitymistä tai käyttörajoja. Suunnittele niin monta asettelua kuin tarvitset.

Luo täydelliset ruudukot sekunneissa