DESIGN

CSS Grid Generator — Grid Layout बनाएं

CSS Grid two-dimensional layouts के लिए most powerful tool है। हमारा CSS Grid Generator visual interface से complex grid structures बनाने देता है — fr units, template areas, और gap सब कुछ।

Grid की Power

  • Rows और columns दोनों एक साथ control
  • Named template areas से semantic layout
  • auto-fill और auto-fit से responsive grids
  • Grid line placement से precise positioning

fr Unit क्या है?

fr (fraction unit) available space का fraction represent करता है। grid-template-columns: 1fr 2fr 1fr — middle column दोनों sides से दोगुनी width पाएगी।

Responsive Grid without Media Queries

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) — automatically wraps when space कम हो। Photo galleries और card layouts के लिए perfect।

Generate करें: CSS Grid Generator

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

Grid item को multiple columns span करना?

grid-column: span 2 — item 2 columns span करेगा।

Grid और table में क्या फर्क है?

Table data representation के लिए है; Grid layout के लिए। Grid position-independent items support करता है।

subgrid क्या है?

CSS subgrid से nested elements parent grid की tracks use कर सकते हैं — perfect alignment achieve होती है।