Global Araç
Css Grid Generator
Preview
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
column-gap: 16px;
row-gap: 16px;
}Visual CSS Grid template builder. Pick a column template (equal columns, auto-fit responsive, or custom track strings), set the number of rows, set gaps between cells, and copy the resulting CSS. The live preview shows your grid with numbered cells so you can see exactly what the rules produce before using them in your project.
CSS Grid was the most-anticipated CSS layout feature when shipped in major browsers in March 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). It replaced flexbox-based hacks and float-based layouts for two-dimensional layouts. Compared to flexbox, which is one-dimensional (rows OR columns), Grid handles both axes simultaneously — perfect for full-page layouts, dashboards, image galleries, calendars, magazine-style content layouts, and any design where you need explicit row + column control.
Common patterns:
- 3-column equal grid:
grid-template-columns: repeat(3, 1fr)— three equal-width columns. The 1fr unit is the magical Grid feature: it distributes available space proportionally. - Responsive auto-fit:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))— columns are at least 250px wide, but stretch to fill available space, automatically wrapping more or fewer columns as the viewport changes. The most useful Grid pattern for responsive image galleries. - Sidebar + main:
grid-template-columns: 250px 1fr— fixed-width sidebar, flexible main content. - Holy Grail layout: header / nav / main / aside / footer — Grid does this in 4 lines of CSS where flexbox needs 30+ lines of nested wrappers.
Nasıl Kullanılır
- Pick column template: 'equal columns' (specify count, all equal width), 'auto-fit responsive' (wraps based on min-width), or 'custom' (paste your own track string like '200px 1fr 300px').
- Set the number of rows (or 'auto' for content-defined row heights).
- Set gap (space between cells) — typical: 16-24px.
- Watch the live preview update with numbered cells showing the resulting grid.
- Copy the CSS and apply to your container element.
- For grid placement within the container (which cells specific child elements go in), set `grid-column` and `grid-row` on each child via additional CSS or inline styles.
Ne Zaman Kullanılır
- Building a 2D layout (rows AND columns matter) — image galleries, dashboards, calendars, magazine layouts.
- Responsive layouts where you want columns to wrap automatically based on viewport width (auto-fit pattern).
- Page-level layouts with header / nav / main / sidebar / footer regions.
- Replacing complex nested-flexbox hacks with cleaner Grid syntax.
Ne Zaman Kullanılmaz
- 1D layouts — for a single row or column of items, flexbox is simpler. Grid is overkill for nav bars, button groups, etc.
- Older browser support — Grid works in all modern browsers (95%+ global as of 2026), but if you need IE11 support (rare in 2026), Grid has incomplete coverage. Use flexbox or a fallback.
- Complex masonry layouts (Pinterest-style staggered grid) — Grid's masonry support is in CSS spec but browser support is patchy. Use a JS library like Masonry.js or column-count CSS for those.
Yaygın Kullanım Senaryoları
- Pre-decision sanity-check on inputs and outputs
- Educational use — demonstrating the underlying concept
- Onboarding a colleague who needs the same calculation/conversion
- Verifying a number or output before passing it on
Sık Sorulan Sorular
auto-fit vs auto-fill?
auto-fit collapses empty tracks (preferred for responsive); auto-fill keeps them. With auto-fit + minmax(250px, 1fr), if you have 2 items, they expand to fill the row. With auto-fill, you'd see 2 items at minimum width with empty tracks. Most use cases want auto-fit. Pick auto-fill only when you want explicit empty cells (rare).
What's the 1fr unit?
Fractional unit — distributes available space proportionally. `grid-template-columns: 1fr 2fr 1fr` makes the middle column twice as wide as the outer two. Different from percentages (which work on parent) or pixels (which are fixed). 1fr is uniquely Grid; it's why Grid replaced most flexbox-based column layouts.
How do I place items in specific cells?
Set `grid-column` and `grid-row` on the child elements. Example: `.header { grid-column: 1 / -1 }` spans all columns. `.sidebar { grid-row: 2 / 4 }` spans rows 2-3. Named grid areas (`grid-template-areas`) are even cleaner for page-level layouts — you draw the layout in ASCII art and reference area names from children.
Grid vs Flexbox?
Grid: 2D layouts (rows AND columns). Flexbox: 1D layouts (rows OR columns). Use Grid for full-page layouts, dashboards, galleries. Use Flexbox for nav bars, button groups, single rows of content. They compose: a Grid container can have Flexbox children, or vice versa. Modern web layout uses both.
What's the browser support?
Universal in modern browsers since 2017 (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). 96%+ global support as of 2026. Grid features added later (subgrid, masonry) have less complete support. Subgrid: Firefox 71+, Safari 16+, Chrome 117+; reasonable in 2026 but verify. Masonry: still experimental.
What about CSS subgrid?
Subgrid lets a nested Grid inherit its parent's track sizing. Example: a card layout where each card has internal rows aligned to the parent's column tracks. Without subgrid, you'd duplicate track definitions; with it, the child says `grid-template-columns: subgrid` and inherits. Useful for complex aligned layouts. Browser support reached cross-browser stability around 2023-2024.