Stax

CSS Grid जनरेटर

लाइव प्रीव्यू के साथ विज़ुअली CSS Grid लेआउट बनाएं।

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

CSS Grid जनरेटर क्या है?

यह visual tool CSS Grid layouts बनाता है — rows, columns, gaps, और grid areas। Drag-drop से items place करें, fr units use करें responsive sizing के लिए। Page layouts, dashboards, card grids के लिए perfect।

Grid जनरेटर का उपयोग कैसे करें

  1. Number of rows और columns चुनें।
  2. हर track की size set करें (fr, px, %)।
  3. Gap (row और column के बीच) adjust करें।
  4. Items को specific cells में place करें।
  5. Generated CSS copy करें।

Grid features

  • fr units — fractional space distribution
  • Grid template areas — visual layout
  • minmax() — flexible track sizes
  • auto-fit / auto-fill — responsive grids

अक्सर पूछे जाने वाले प्रश्न

CSS Grid कैसे काम करता है?
Grid 2D layout system है — rows और columns दोनों control करता है। Container पर display: grid; grid-template-columns: 1fr 1fr 1fr; (3 equal columns)। Items automatic place होते हैं या grid-area से explicitly।
fr unit क्या है?
fr = fractional unit, available space का हिस्सा। 1fr 2fr 1fr = 25% 50% 25%। Pixel/percentage से बेहतर — responsive automatically। minmax(min, max) flexible columns के लिए: minmax(200px, 1fr)।
Grid template areas क्या हैं?
Visual layout define करने का तरीका। grid-template-areas: "header header" "sidebar main" "footer footer"। फिर items को grid-area: header; assign करें। Code बहुत readable होता है।
Auto-fit और auto-fill में क्या फर्क है?
दोनों repeat() में use होते हैं responsive grids के लिए। auto-fill — empty tracks बनाता है (space होने पर)। auto-fit — empty tracks collapse करता है (items expand होते हैं)। Cards/galleries के लिए auto-fit ज्यादा common।

संबंधित टूल्स