CSS Grid -generaattori
Ilmainen online CSS Grid -asettelugeneraattori, visuaalinen editori
Tietoja ruudukon asettelusta
Visuaalisesti rakenna CSS Grid tasakokoisilla radoilla. Säädä sarakkeiden (1–12), rivien (1–12) ja välyksen (0–32px) määrää, ja työkalu renderöi live-ruudukon numeroituja soluja plus nelirivisen CSS-koodin käyttäen grid-template-columns: repeat(N, 1fr) ja grid-template-rows: repeat(M, 1fr).
Käyttöohjeet
1. Vedä Sarakkeet-liukusäädin (1–12) asettaaksesi tasakokoisten 1fr-sarakkeiden määrän. 2. Vedä Rivit-liukusäädin (1–12) asettaaksesi tasakokoisten 1fr-rivien määrän. 3. Vedä Välys-liukusäädin (0–32px) asettaaksesi uran solujen väliin. 4. Napsauta Kopioi kopioidaksesi nelirivisen CSS-määrityslohkon.
Generoitu CSS
Tulo on aina tasan neljä riviä: display: grid; grid-template-columns: repeat({cols}, 1fr); grid-template-rows: repeat({rows}, 1fr); gap: {gap}px. Kaikki radat ovat yhtä suuria murtolukuja (1fr) — ei ole tukea sekoitetuille koolle, minmax, auto-fit/auto-fill tai nimetyille alueille tässä työkalussa.
▶Voinko luoda responsiivisia auto-fit -ruudukoita?
▶Miksi esikatselu näyttää tyhjiä soluja?
▶Voinko asettaa eri kokoja tietyille radoille?
▶Mikä on suurin ruudukon koko?
Jos tämä työkalu on ollut sinulle hyödyllinen, harkitse kahvin ostamista.
Osta minulle kahvi