CSS Grid -generaattori
Reaaliaikainen esikatselu
Miksi käyttää visuaalista CSS Grid -generaattoria?
CSS Grid on CSS:n tehokkain asettelujärjestelmä, mutta sen syntaksilla on jyrkkä oppimiskäyrä. Visuaalisella generaattorilla voit säätää ruudukkoa liukusäätimillä ja pudotusvalirkoilla ja nähdä kunkin ominaisuuden vaikutuksen reaaliajassa.
Reaaliaikainen ruudukkoesikatselu
Ruudukko päivittyy reaaliajassa kun säädät sarakkeita, rivejä, väliä ja tasausta
fr-yksiköiden tuki
Mallit käyttävät fr (murtoluku) -yksikköä joustaville ruudukoille, jotka mukautuvat säiliön kokoon
Käyttövalmis CSS
Vie siisti .container CSS-lohko, jossa on grid-template-columns, rows, gap ja align-items
CSS Grid -asettelun luominen
Konfiguroi sarakkeet ja rivit
Aseta ruudukon sarakkeiden ja rivien määrä liukusäätimillä
Valitse malli ja väli
Valitse sarakemalli (tasainen, kiinteä+joustava tai responsiivinen minmax) ja säädä väliä
Kopioi CSS
Napsauta 'Kopioi CSS' saadaksesi täydellinen CSS-lohko suoraan tyylitiedostoosi liitettäväksi
CSS Gridin käyttötapaukset
Sivun asettelu
Luo ylätunniste/sivupalkki/pääsisältö/alapalkki-rakenne nimetyillä ruudukkoalueilla
Koontinäyttö
Luo monimutkaisia koontinäyttöasetteluja erikokoisilla korteilla grid-column ja grid-row span -arvoja käyttäen
Galleria
Luo muurimais- tai säännöllisiä gallerioita, jotka mukautuvat auto-fill ja minmax -arvoilla
Lehtiasettelu
Luo toimituksellisia asetteluja epätasaisilla sarakkeilla ja useiden solujen yli ulottuvalla sisällöllä
CSS Gridin parhaat käytännöt
✓ Suosi fr-yksikköä prosenttilukujen sijaan
fr (murtoluku) -yksikkö jakaa saatavilla olevan tilan kiinteiden sarakkeiden jälkeen ilman manuaalista laskentaa.
✓ Käytä minmax() responsiivisiin ruudukoihin
repeat(auto-fill, minmax(250px, 1fr)) luo responsiivisen ruudukon, joka säätää sarakkeiden määrää automaattisesti.
✓ Käytä nimettyjä ruudukkoalueita
grid-template-areas nimetyillä soluilla tekee sivun asetteluista luettavia ja helposti muokattavia.
✓ Ymmärrä auto-fill vs. auto-fit
auto-fill luo maksimimäärän raitoja (myös tyhjät). auto-fit tiivistää tyhjät raidat ja laajentaa olemassa olevia — yleensä optimaalinen korttiruudukoille.
❓ Usein kysytyt kysymykset
Mikä fr-yksikkö on CSS Gridissä?
fr tarkoittaa 'murtolukuyksikköä'. 1fr edustaa osaa ruudukko säiliön saatavilla olevasta vapaasta tilasta. repeat(3, 1fr) luo 3 saraketta, jotka jakavat saatavilla olevan tilan tasaisesti.
Mikä on ero CSS Gridin ja Flexboxin välillä?
Flexbox on yksiulotteinen — sijoittaa elementit yhden akselin (rivi tai sarake) suuntaan. CSS Grid on kaksiulotteinen — voi hallita rivejä ja sarakkeita samanaikaisesti, paljon tehokkaampi sivun asetteluihin.
Mitä minmax() tekee?
minmax(min, max) määrittää kokoalueen ruudukkoraidalle. minmax(200px, 1fr) tarkoittaa, että sarake on vähintään 200px leveä, mutta voi kasvaa täyttämään saatavilla olevan tilan.
Milloin käyttää CSS Gridiä Flexboxin sijaan?
Käytä Gridiä kaksiulotteisiin asetteluihin, joissa hallitset rivejä ja sarakkeita samanaikaisesti. Käytä Flexboxia komponenttien yksiulotteisiin asetteluihin kuten navigointipalkkeihin.