如何使用CSS网格来拉伸项目以填充容器？

CSS网格（CSS Grid）是一种强大的布局系统，它允许你在二维空间内创建复杂的布局。要使用CSS网格来拉伸项目以填充容器，你可以使用以下基础概念和方法：

基础概念

网格容器（Grid Container）：通过设置 display: grid; 或 display: inline-grid; 将一个元素变为网格容器。
网格项（Grid Item）：网格容器内的子元素。
网格线（Grid Lines）：定义网格的行和列的虚拟线。
网格单元格（Grid Cell）：由两条相邻的行线和列线形成的矩形区域。
网格区域（Grid Area）：由一组相邻的网格单元格组成的区域。

类型

固定网格：使用固定的行高和列宽。
自适应网格：使用 fr 单位来定义列宽，使列宽根据可用空间自动调整。

应用场景

复杂的多列布局：如仪表板、杂志布局等。
响应式网页设计：确保在不同设备上都能良好显示。

示例代码

以下是一个简单的示例，展示如何使用CSS网格来拉伸项目以填充容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */
            grid-gap: 10px; /* 网格项之间的间距 */
            height: 100vh; /* 容器高度占满整个视口 */
        }

        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>