CSS Grid Generator

Ek CSS grid visually design karein — columns, rows, gaps, aur merged cells set karein, phir grid-template CSS copy karein. Sab kuch aapke browser mein chalta hai.

CSS Grid Generator poori tarah aapke browser mein chalta hai. Jo columns, rows, track sizes, gaps, aur merged cells aap configure karte hain woh kabhi aapke device se bahar nahi jaate aur kuch bhi ArrayKit ko upload nahi hota.

CSS Formatter kholein

CSS Grid Generator ke baare mein

CSS Grid Generator aapko ek grid layout aankh se banane aur woh jo exact CSS produce karta hai use copy karne deta hai. Ek column aur row count pick karein, har track ko fr units, pixels, percentages, auto, ya minmax() se size karein, aur gap set karein. Ek live preview grid dikhata hai; do cells click karein taaki unhe ek spanned region mein merge kar dein aur tool aapke liye matching grid-column aur grid-row rules likhta hai. Teen ya zyada identical tracks ke runs repeat() mein collapse ho jaate hain taaki output saaf rahe, aur aap selector ko apni khud ki class se match karne ke liye rename kar sakte hain. Yeh un front-end developers ke liye bana hai jo cards, dashboards, aur page shells lay out karte hain aur lines hand-count kiye bina sahi grid-template CSS chahte hain. Editor poori tarah aapke browser mein chalta hai, isliye jo aap type karte hain woh kuch upload nahi hota.

Features

CSS Grid Generator kaise use karein

  1. Chunein ki aapke layout ko kitne columns aur rows chahiye
  2. Har track ko fr, px, %, auto, ya minmax() se size karein
  3. Gap set karein, aur agar alag hona chahiye to ek column gap
  4. Ek spanned region merge karne ke liye preview mein do cells click karein
  5. Generated CSS ko apni stylesheet mein copy karein

Example

Input

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Output

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

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Teen equal columns repeat(3, 1fr) mein collapse ho jaate hain aur merged cells teen tracks span karte hain.

Common errors aur troubleshooting

Aksar pooche jaane wale sawaal

CSS Grid Generator kya output karta hai?
Yeh display: grid, grid-template-columns, grid-template-rows, aur gap wala ek container rule produce karta hai, plus har merged region ke liye jo aap banate hain ek grid-column / grid-row rule. Aap poora block apni stylesheet mein copy karte hain.
Mere tracks kab repeat() mein collapse hote hain?
Teen ya zyada identical adjacent tracks repeat(n, value) mein fold ho jaate hain. Ek row mein ek ya do written-out rehte hain, kyunki repeat() output ko sirf teen tracks se hi chhota karta hai. Mixed sequences literal tracks aur repeat() groups ko interleave karti hain.
Main multiple columns ya rows span karne ke liye cells kaise merge karoon?
Preview mein ek cell click karein, phir doosri cell click karein. Tool un ke beech ka rectangle select karta hai aur sahi start line aur span ke saath grid-column aur grid-row likhta hai. Ek merged block par phir click karke use single cells mein wapas split karein.
Kya main track sizes ke liye minmax(), auto, aur percentages use kar sakta hoon?
Haan. Har track ek fr value, ek pixel length, ek percentage, auto, ya minmax(min, max) accept karta hai. Bare numbers fr ke roop mein treat hote hain, aur minmax() spacing normalise hoti hai taaki copied CSS consistent rahe.
Generated rule ek :nth-child() selector kyun use karta hai?
Merged regions position se place hote hain, isliye tool grid children ko source order mein :nth-child() se target karta hai. Container selector ko apni khud ki class mein rename karein, aur placement rules automatically use follow karti hain.
Kya jo grid main design karta hoon woh kahin bheja jaata hai?
Nahi. CSS Grid Generator template aur placement CSS poori tarah aapke browser mein banata hai. Jo columns, rows, gaps, aur merged cells aap set karte hain woh kabhi aapke device se bahar nahi jaate aur ArrayKit ko upload nahi hote.

Related tools

Saare ArrayKit tools