时间戳

首页 > 解决方案 > 是否可以像这样制作一个包含 6 个单元格的网格？

javascript - 是否可以像这样制作一个包含 6 个单元格的网格？

问题描述

我正在尝试制作一个包含 6 个单元格且中间没有空单元格的网格，但无法做到这一点.. 我尝试创建 9 个单元格然后跨越，但由于有空单元格，它没有成功介于两者之间。

感谢您的反馈，我希望它的形状与这张图片相同：

网格 6 个单元格没有空单元格

标签： javascripthtmlcss

解决方案

使用弹性盒：

.row {
  display: flex;
}

.col {
  height: 50px;
  width: 100%;
  /* \/ below is just for styling \/ */
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 24px;
  font-weight: bold;
}
<div class="row">
  <div class="col">1</div>
</div>
<div class="row">
  <div class="col">2</div>
  <div class="col">3</div>
</div>
<div class="row">
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

推荐阅读