CSS Grid 和 Flexbox 有什么区别？

CSS Grid 是二维布局系统，可以同时控制行和列，适合复杂的页面整体布局。Flexbox 是一维布局系统，一次只能控制行或列，适合组件内部的小范围布局。Grid 更适合"宏观布局"（如页面骨架），Flexbox 更适合"微观布局"（如导航栏、按钮组）。两者可以配合使用。

fr 单位是什么意思？

fr（fraction）是 CSS Grid 特有的单位，表示"剩余空间的份额"。例如 1fr 1fr 1fr 表示将剩余空间均分为三份。fr 单位会自动计算并分配容器中未被固定尺寸（如 px）占用的空间，比百分比更灵活，是 Grid 布局中最常用的单位。

minmax() 函数怎么用？

minmax(min, max) 定义了轨道尺寸的范围。例如 minmax(200px, 1fr) 表示轨道最小 200px，最大为 1fr（可用空间）。常用于响应式布局：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 可以自动换行且每列最小 250px。

如何实现响应式 Grid 布局？

最简单的方式是使用 repeat(auto-fill, minmax(min, max))，浏览器会根据容器宽度自动决定列数。也可以结合媒体查询，在不同屏幕宽度下改变 grid-template-columns 的值。auto-fill 会尽可能多地填充列，auto-fit 则会将空列折叠，通常 auto-fit 更符合预期。

CSS Grid 生成器

可视化 CSS Grid 布局生成器，实时预览网格布局，一键复制生成的 CSS 代码

预设布局：

网格容器设置

grid-template-columns

grid-template-rows

gap

行间距

列间距

对齐方式

justify-items

align-items

justify-content

align-content

网格项目 (6 个)

实时预览

600 × 300

生成的 CSS 代码

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>