时间戳

首页 > 解决方案 > 如何在css中制作动态四列布局

javascript - 如何在css中制作动态四列布局

问题描述

我想获取数据（标题、编号和日期）并将它们放入一个框（绿色框）并将这些框放在我网站的一行中，如下所示： screenshot

每行可以有 4 个项目，但因为盒子的数量是动态的，所以我只能在一行中有两个盒子。

即使只有 2 个盒子，我也希望盒子之间有一个均匀的空间。我不能使用 { justify-content:space-between } 因为在这种情况下我有两个盒子，一个贴在页面和其他棒在左侧，我不能使用 {margin-right} 或 {margin-left} 因为如果我有 4 个盒子，我希望盒子粘在两侧，就像我使用 { justify-content:space-between }

如果你能帮我解决这个问题，我会很高兴

PS：我在 reactjs 中编码

标签： javascripthtmlcssreactjs

解决方案

您可以使用display: grid来实现屏幕截图中的内容。这带来了额外的好处，即能够设置列相对于彼此的大小：

.boxcontainer{
  display: grid;                          /* Use grid type layout to get columns */
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Proportions of the columns */
  gap: 20px;                              /* Use gap here instead of margin in .box */
}
.box{
  width: 100%;    /* Use 100% of each column */
  height: 200px;  /* This can be whatever you want */
  background-color: red;
}
<div class="boxcontainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

推荐阅读