Developer

सीएसएस ग्रिड लेआउट जेनरेटर

सीएसएस ग्रिड लेआउट को दृश्य रूप से उत्पन्न करें, पंक्तियों, स्तंभों और अंतरालों को सेट करें, और सीएसएस/एचटीएमएल कोड की प्रतिलिपि बनाएँ। यह पूरी तरह से आपके ब्राउज़र में चलता है — किसी भी सर्वर पर कोई डेटा नहीं भेजा जाता है, किसी खाते की आवश्यकता नहीं है, और यह पूरी तरह से मुफ़्त है।

Grid Settings

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

The Complete Guide to CSS Grid: Modern Two-Dimensional Layouts

CSS Grid Layout is the most powerful layout system in CSS. It turns any HTML element into a grid container, letting you position child elements in rows and columns with precise control. Our free CSS Grid Generator lets you build grid layouts visually and instantly copy production-ready CSS and HTML — no manual coding required.

CSS Grid Core Properties

  • display: grid — Activates grid layout on a container
  • grid-template-columns — Defines column sizes (e.g., repeat(3, 1fr), 200px 1fr 200px)
  • grid-template-rows — Defines row sizes
  • gap — Sets spacing between grid cells (replaces the older grid-gap)
  • grid-column / grid-row — Lets a child span multiple columns or rows
  • place-items — Shorthand for align-items + justify-items

The fr Unit Explained

The fr (fraction) unit is unique to CSS Grid. It represents a fraction of the available space in the grid container. repeat(3, 1fr) creates three columns that each take up one-third of the container width. 2fr 1fr creates two columns where the first is twice as wide as the second. The fr unit is distributed after fixed-size and auto-size columns are calculated.

Grid Auto-Placement

By default, grid items are placed automatically in the next available cell, flowing left-to-right, top-to-bottom. The grid-auto-flow property controls this: row (default) fills rows first, column fills columns first, and dense attempts to fill gaps with smaller items.

Browser Support

CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2017, with global coverage above 97%. For legacy Internet Explorer 11, a partial implementation exists using -ms- prefixes, but modern projects no longer need to worry about this.

After generating your grid, minify your CSS with our CSS Minifier, or generate gradient backgrounds with our CSS Gradient Generator.

शेयर करें:
सीएसएस मिनीफ़ायर और फ़ॉर्मेटर
सीएसएस कोड को छोटा करें और प्रारूपित करें
सीएसएस ग्रेडिएंट जेनरेटर
CSS ग्रेडिएंट जनरेट करें