如何使用 CSS Grid 制作带有边框的布局

CSS Grid 是一种强大的布局方式，可以轻松地实现复杂的布局效果。本文将介绍如何使用 CSS Grid 制作带有边框的布局。

什么是 CSS Grid

CSS Grid 是一种基于网格的布局方式，用于创建复杂的网格布局。它可以让开发者更加灵活地控制内容在页面上的位置和大小。

使用 CSS Grid 制作带有边框的布局非常简单。以下是具体步骤：

1. 设置容器的样式

首先，需要设置容器的样式。可以使用以下 CSS 属性：

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
border: 1px solid #ccc;

其中，display 属性设置为 grid，表示这个容器是一个网格布局。grid-template-columns 和 grid-template-rows 属性用于设置网格的列数和行数。grid-gap 属性用于设置网格间隙的大小。

最后，设置 border 属性为 1px 的实线，即可为容器添加一个边框。

1. 设置子元素的位置

接下来，需要设置子元素的位置。可以使用以下 CSS 属性：

grid-column: 1 / span 2;
grid-row: 1 / span 2;

这里，grid-column 属性用于设置子元素所跨越的列数。1 / span 2 表示子元素从第一列开始，跨越两列。grid-row 属性用于设置子元素所跨越的行数。

设置完成后，子元素将会占据容器的一部分，并且有一个边框。

1. 设置子元素的内容

最后，需要设置子元素的内容。可以使用以下 CSS 属性：

padding: 10px;

这里，padding 属性可以为子元素添加间距，使得子元素的内容与边框之间有一定的距离。

示例代码

下面是一个完整的示例代码，用于实现一个带有边框的网格布局：

<div class="container">
  <div class="item item-1">
    <p>1</p>
  </div>
  <div class="item item-2">
    <p>2</p>
  </div>
  <div class="item item-3">
    <p>3</p>
  </div>
  <div class="item item-4">
    <p>4</p>
  </div>
  <div class="item item-5">
    <p>5</p>
  </div>
  <div class="item item-6">
    <p>6</p>
  </div>
  <div class="item item-7">
    <p>7</p>
  </div>
  <div class="item item-8">
    <p>8</p>
  </div>
  <div class="item item-9">
    <p>9</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  border: 1px solid #ccc;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.item-2 {
  grid-column: 3;
  grid-row: 1;
}

.item-3 {
  grid-column: 3;
  grid-row: 2;
}

.item-4 {
  grid-column: 1;
  grid-row: 3;
}

.item-5 {
  grid-column: 2;
  grid-row: 3;
}

.item-6 {
  grid-column: 3;
  grid-row: 3;
}

.item-7 {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.item-8 {
  grid-column: 1;
  grid-row: 2;
}

.item-9 {
  grid-column: 1;
  grid-row: 1;
}

p {
  margin: 0;
  padding: 10px;
}

总结

使用 CSS Grid 制作带有边框的布局非常简单。可以通过设置容器的样式、子元素的位置和子元素的内容，轻松地实现带有边框的网格布局。希望本文能够对大家的学习和开发工作有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659177abeb4cecbf2d69962d