Developer

CSS Grid Layout Generator

Visually generate CSS grid layouts, set rows, columns, and gaps, and copy the CSS/HTML code. Ini berjalan sepenuhnya di browser Anda — tidak ada data yang dikirim ke server mana pun, tidak perlu akun, dan sepenuhnya gratis.

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.

Bagikan:
CSS Minifier & Formatter
Minify and format CSS code
CSS Gradient Generator
Generate CSS gradients