网格基础

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 31 课，共 43 课。

CSS Grid 是一种布局系统，可以让你轻松创建包含行和列的网页。它非常适合构建复杂且响应式的布局，无需使用浮动或复杂的定位方式。此外，它还适用于所有现代浏览器。

要创建网格容器，请使用 display 属性：

.container {
  display: grid;
}

使用 grid-template-columns 和 px 或 fr 单位（份数）在网格中定义列：

/* 这会创建三列，中间一列的宽度是另外两列各自宽度的两倍。 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

使用 grid-template-rows 定义行。使用 gap 属性为网格项之间添加间距。

/* 创建一个两行的网格：第一行高 100px，第二行高 200px。 */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

挑战

简单

为名为 grid-container 的类创建一条 CSS 规则，要求：

将 display 属性设置为创建网格
使用 fr 单位创建三列等宽的列
创建两行：第一行高 150px，第二行高 250px
在所有网格项之间添加 20px 的间距

只编写 grid-container 类的 CSS 代码。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-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>