首页 › HTML / CSS › CSS 教程

Grid 网格布局

CSS 教程 · 第 9 章 · 8 次浏览

Grid（网格布局）是二维布局模型，同时控制行和列，适合构建复杂页面骨架和卡片网格。

核心概念

容器设置 display: grid 后，通过 grid-template-columns 定义列，grid-template-rows 定义行。repeat(3, 1fr) 表示 3 等分列；gap 设置行列间距。

常用写法

  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))：自动响应式列，窄屏自动换行；
  • grid-column: span 2：项目跨两列；
  • place-items: center：项目在单元格内居中。

对比：Flex 适合"一行内对齐分配"，Grid 适合"整体行列布局"，两者可嵌套组合使用。

代码示例

<style>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.item {
    height: 140px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    color: #fff;
    display: grid;
    place-items: center;      /* 水平垂直居中 */
    font-size: 20px;
}
.item-wide {
    grid-column: span 2;      /* 跨两列 */
}
</style>
<div class="gallery">
    <div class="item">1</div>
    <div class="item item-wide">2（跨两列）</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
color: #333;文字颜色
background: #fff;背景色 / 背景图
font-size: 16px;字号
font-family: Arial;字体
font-weight: bold;字重（加粗）
margin: 10px;外边距（上右下左）
padding: 10px;内边距
border: 1px solid #ccc;边框：粗细 样式 颜色
border-radius: 8px;圆角
width: 100%;宽度
height: 200px;高度
display: flex;弹性布局（现代布局主力）
display: none;隐藏元素
position: relative / absolute / fixed;定位方式
top / left / right / bottom定位偏移
text-align: center;文字水平对齐
line-height: 1.6;行高
overflow: hidden;内容溢出处理
box-shadow: 0 2px 8px rgba(0,0,0,.1);阴影
transition: all .3s;过渡动画
cursor: pointer;鼠标手型
z-index: 10;层叠顺序
max-width: 1200px; margin: 0 auto;容器居中（经典写法）
@media (max-width: 768px) {}响应式断点
:hover鼠标悬停状态
📖 延伸阅读