CSS Grid

学习 CSS 网格布局（Grid）的基本概念、属性和使用方法，掌握现代 CSS 二维布局技术。

什么是 CSS Grid？

CSS Grid（网格布局）是一种二维布局模型，用于在容器中对项目进行行和列的排列。它可以轻松创建复杂的布局结构，适用于各种屏幕尺寸和设备。

Grid 基本术语

网格容器 (Grid Container)：应用了 display: grid; 或 display: inline-grid; 的元素。
网格项目 (Grid Item)：网格容器的直接子元素。
网格线 (Grid Line)：构成网格结构的线，包括水平线和垂直线。
网格轨道 (Grid Track)：两条相邻网格线之间的空间，包括行和列。
网格单元格 (Grid Cell)：相邻的行和列网格线之间的最小单位，类似于表格的单元格。
网格区域 (Grid Area)：由一个或多个网格单元格组成的矩形区域。
网格间隙 (Grid Gap)：网格轨道之间的空间。

/* 创建一个网格容器 */
.grid-container {
    display: grid;
    /* 其他 grid 容器属性 */
}

/* 网格项目会自动成为容器的子元素 */
.grid-item {
    /* 其他 grid 项目属性 */
}

Grid 容器属性

1. display

定义一个网格容器。

值	描述
grid	创建一个块级网格容器。
inline-grid	创建一个内联网格容器。

2. grid-template-columns 和 grid-template-rows

定义网格的列和行的大小。

值	描述
length	指定具体的长度值，如 px、em、% 等。
fr	网格剩余空间的比例单位。
auto	根据内容自动调整大小。
minmax(min, max)	指定最小和最大尺寸范围。
repeat(n, value)	重复指定的值 n 次。

/* 定义一个 3 列 2 行的网格 */
.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 50px 100px;
}

/* 使用 repeat 函数 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

/* 使用 minmax 函数 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}

3. grid-template-areas

定义网格区域的布局。

/* 定义网格区域 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "sidebar main right"
        "footer footer footer";
}

/* 分配网格项目到区域 */
.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.right {
    grid-area: right;
}

.footer {
    grid-area: footer;
}

4. grid-template

grid-template-columns、grid-template-rows 和 grid-template-areas 的简写属性。

5. gap (grid-gap)

定义网格项目之间的间隙。

值	描述
length	指定具体的长度值，如 px、em 等。
fr	网格剩余空间的比例单位。

/* 设置网格间隙 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* 行和列的间隙都是 10px */
}

/* 分别设置行和列的间隙 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
    column-gap: 20px;
}

6. justify-items

定义网格项目在单元格内水平方向的对齐方式。

值	描述
stretch	默认值，拉伸以填充单元格。
start	左对齐。
end	右对齐。
center	水平居中对齐。

7. align-items

定义网格项目在单元格内垂直方向的对齐方式。

值	描述
stretch	默认值，拉伸以填充单元格。
start	顶部对齐。
end	底部对齐。
center	垂直居中对齐。

8. place-items

align-items 和 justify-items 的简写属性。

9. justify-content

定义网格容器内网格在水平方向的对齐方式，当网格总宽度小于容器宽度时生效。

值	描述
stretch	默认值，拉伸以填充容器。
start	左对齐。
end	右对齐。
center	水平居中对齐。
space-between	网格之间均匀分布，首尾网格贴近容器边缘。
space-around	网格之间均匀分布，首尾网格距离容器边缘有一半间距。
space-evenly	网格之间和与容器边缘之间都均匀分布。

10. align-content

定义网格容器内网格在垂直方向的对齐方式，当网格总高度小于容器高度时生效。

值	描述
stretch	默认值，拉伸以填充容器。
start	顶部对齐。
end	底部对齐。
center	垂直居中对齐。
space-between	网格之间均匀分布，首尾网格贴近容器边缘。
space-around	网格之间均匀分布，首尾网格距离容器边缘有一半间距。
space-evenly	网格之间和与容器边缘之间都均匀分布。

11. place-content

align-content 和 justify-content 的简写属性。

12. grid-auto-columns 和 grid-auto-rows

定义自动生成的网格轨道的大小。

13. grid-auto-flow

定义自动放置网格项目的方式。

值	描述
row	默认值，按行填充。
column	按列填充。
dense	尝试填充网格中的空隙。

Grid 项目属性

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end

定义网格项目的位置和大小。

值	描述
number	网格线的编号。
name	命名的网格线。
span n	跨越 n 个网格轨道。
auto	自动确定位置。

/* 设置网格项目的位置和大小 */
.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

/* 使用简写属性 */
.item2 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

/* 使用 span */
.item3 {
    grid-column: 2 / span 2;
    grid-row: 1 / span 3;
}

2. grid-column 和 grid-row

grid-column-start/grid-column-end 和 grid-row-start/grid-row-end 的简写属性。

3. grid-area

定义网格项目的区域，可以是命名的区域或网格线的组合。

4. justify-self

定义单个网格项目在单元格内水平方向的对齐方式，覆盖容器的 justify-items 属性。

值	描述
stretch	默认值，拉伸以填充单元格。
start	左对齐。
end	右对齐。
center	水平居中对齐。

5. align-self

定义单个网格项目在单元格内垂直方向的对齐方式，覆盖容器的 align-items 属性。

值	描述
stretch	默认值，拉伸以填充单元格。
start	顶部对齐。
end	底部对齐。
center	垂直居中对齐。

6. place-self

align-self 和 justify-self 的简写属性。

Grid 实际应用示例

示例 1：基本网格布局

<div class="grid-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>

<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
}

.item {
    background-color: #e0f7fa;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
}
</style>

示例 2：响应式网格

<div class="responsive-grid">
    <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>

<style>
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.item {
    background-color: #e8f5e8;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
}
</style>

示例 3：复杂布局

<div class="complex-layout">
    <header class="header">头部</header>
    <aside class="sidebar">侧边栏</aside>
    <main class="main">主内容</main>
    <section class="widget1">小部件 1</section>
    <section class="widget2">小部件 2</section>
    <footer class="footer">底部</footer>
</div>

<style>
.complex-layout {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "sidebar widget1 widget2"
        "footer footer footer";
    gap: 10px;
    min-height: 100vh;
}

.header {
    grid-area: header;
    background-color: #333;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #f0f0f0;
    padding: 20px;
}

.main {
    grid-area: main;
    background-color: #ffffff;
    padding: 20px;
}

.widget1 {
    grid-area: widget1;
    background-color: #e3f2fd;
    padding: 20px;
}

.widget2 {
    grid-area: widget2;
    background-color: #e8f5e8;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    padding: 20px;
}
</style>

示例 4：卡片网格

<div class="card-grid">
    <div class="card">
        <h3>卡片 1</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 2</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 3</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 4</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 5</h3>
        <p>这是一张卡片内容</p>
    </div>
</div>

<style>
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card h3 {
    margin-top: 0;
    color: #333;
}

.card p {
    color: #666;
}
</style>

Grid 使用技巧

二维布局优先使用 Grid：Grid 适用于二维布局（行和列），而 Flexbox 适用于一维布局。
合理使用 repeat 函数：使用 repeat() 函数可以简化重复的网格轨道定义。
使用 minmax 函数创建响应式布局：minmax() 函数可以确保网格轨道在不同屏幕尺寸下的合理显示。
使用 auto-fit 和 auto-fill 创建自适应网格：结合 repeat() 和 minmax() 可以创建自适应的响应式网格。
合理命名网格区域：使用 grid-template-areas 可以创建清晰易懂的布局结构。
注意浏览器兼容性：虽然现代浏览器都支持 Grid，但在处理旧浏览器时需要考虑兼容性。
结合 Flexbox 使用：Grid 和 Flexbox 可以结合使用，Grid 用于整体布局，Flexbox 用于局部对齐。

Grid 总结

CSS Grid 是一种二维布局模型，用于在容器中对项目进行行和列的排列。
网格容器通过 display: grid; 或 display: inline-grid; 创建。
Grid 容器属性控制整个容器的布局方式，如网格轨道大小、对齐方式等。
Grid 项目属性控制单个项目的行为，如位置、大小、对齐方式等。
Grid 可以轻松创建复杂的布局结构，如响应式网格、卡片布局、复杂页面布局等。
Grid 是现代 CSS 布局的重要工具，掌握它可以大大提高布局效率和灵活性。