css三行一列布局

CSS的三行一列布局是必学技能，它可以帮助你在网页设计中更好地布局。

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

首先我们需要创建一个容器，并将其设置为网格布局。这可以通过设置容器CSS属性 display: grid 来实现。

然后，我们需要定义每个列和每行的大小。我们可以通过在容器上使用 grid-template-columns 和 grid-template-rows 属性来实现。这里我们将每个列设置为相等的大小，使用 fr 将可用空间分成三个部分。

最后，在每个网格之间创建空隙，以避免它们过于紧密。我们可以使用 gap 属性在容器中定义这个间距。

.item {
  background-color: #ccc;
  padding: 20px;
} 

我们还可以在每个网格内添加样式，以更好地定制外观和感觉，例如背景颜色和填充等。这可以使用 .item 类，为容器中的每个网格指定一组CSS样式。

此时，我们的三行一列布局已准备就绪，您可以在其内部添加所需内容，以便在网页上更好地布局和组织所有元素。