网格如何去除柱网格

Question

如何从显示网格中删除垂直柱网格 我使用 display: grid 和 grid-template-column: Repeat(2, 1fr) 来获取这个垂直网格

---------------------------------------------------------

如何去除这个垂直柱网

从这里

到此

Answer 1

目前此功能在

grid

中不起作用。您需要使用

flexbox

和

flex-wrap

。像这样的东西：

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 200px;
}

.size {
  background: lightgray;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
}

<div class="sizes">
<div class="size">XX-Small</div>
<div class="size">X-Small</div>
<div class="size">Small</div>
<div class="size">Medium</div>
<div class="size">Large</div>
<div class="size">X-Large</div>
<div class="size">XX-Large</div>
<div class="size">3X Large</div>
<div class="size">4X Large</div>
</div>

最终，

grid

将获得一个砖石选项，允许类似的事情，但目前，

grid

不是正确的解决方案，因为它将事物保持在网格中。