gridlayout布局列没有生效_聊聊前端的Html布局

GridLayout 是 Android 中的布局管理器，不是 HTML 中的布局方式。如果您想了解 HTML 中的布局方式，可以考虑使用 CSS 中的布局方式。

在 HTML 中，有多种布局方式，如 Flexbox、Grid、Bootstrap 等。其中，Flexbox 是一种非常流行的布局方式，可以通过设置容器的 display 属性为 flex 来实现。而 Grid 是一种比较新的布局方式，可以通过设置容器的 display 属性为 grid 来实现。

如果您想要使用 Grid 布局，可以像下面这样写：

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

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

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

上面的代码中，我们使用了 grid-template-columns 属性来设置容器中每一列的宽度，使用 repeat 函数来重复设置，1fr 表示每一列的宽度占据剩余空间的一部分。grid-gap 属性用来设置列与列之间的间距。

如果您想要使用 Flexbox 布局，可以像下面这样写：

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

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: calc(33.33% - 10px);
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

上面的代码中，我们使用了 flex-wrap 属性来设置容器中的内容是否换行，使用 justify-content 属性来设置内容在容器中的对齐方式。而在每个子元素中，我们使用了 width 属性来设置每个子元素的宽度，使用 calc 函数来计算每个子元素的宽度。

以上是一些简单的示例，您可以根据实际需求进行调整和优化。