What is the difference between CSS Grid and Flexbox?

CSS Grid is a two-dimensional layout system that can control both rows and columns simultaneously, ideal for complex page-level layouts. Flexbox is a one-dimensional system that handles either a row or a column at a time, better suited for component-level layouts like navigation bars and button groups. They work well together — Grid for the macro layout, Flexbox for the micro layout.

What does the fr unit mean?

fr (fraction) is a CSS Grid-specific unit representing a share of the remaining space. For example, 1fr 1fr 1fr divides the available space into three equal parts. fr units automatically calculate and allocate space not occupied by fixed sizes (like px), making them more flexible than percentages and the most commonly used unit in Grid layouts.

How do I use the minmax() function?

minmax(min, max) defines a track size range. For example, minmax(200px, 1fr) sets a minimum of 200px and a maximum of 1fr. It's commonly used in responsive layouts: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) automatically wraps columns with a minimum width of 250px.

How do I create responsive Grid layouts?

The easiest way is repeat(auto-fill, minmax(min, max)) — the browser automatically determines column count based on container width. You can also use media queries to change grid-template-columns at different breakpoints. auto-fill fills as many columns as possible, while auto-fit collapses empty columns; auto-fit is usually the better choice.

CSS Grid

Visual Grid Layout Generator

Presets:

Grid Container Settings

grid-template-columns

grid-template-rows

gap

Row Gap

Column Gap

Alignment

justify-items

align-items

justify-content

align-content

Grid Items (6)

Live Preview

600 × 300

Generated CSS & HTML

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS Grid Generator Guide

Features

Column/Row Definition — supports fr, %, px, auto, minmax units
Gap Control — independent row gap and column gap settings
Alignment — justify-items, align-items, justify-content, align-content
Live Preview — instantly see layout changes as you adjust parameters
Preset Layouts — 2-column, 3-column, sidebar+content, holy grail, and more
Code Export — one-click copy of CSS and HTML code

Use Cases

Web page layout design and prototyping
Responsive grid system setup
Card lists and masonry-style layouts
Dashboard and admin panel layouts
CSS Grid learning and experimentation

CSS Grid

Grid Container Settings

Live Preview

Generated CSS & HTML

CSS Grid Generator Guide

Features

Use Cases

常见问题

相关工具

CSS Grid

Grid Container Settings

Live Preview

Generated CSS & HTML Copy CSSCopy HTML

CSS Grid Generator Guide

Features

Use Cases

常见问题

相关工具

Generated CSS & HTML