css - 瓷砖间距相等

Question

是否可以显示 8 个 250 像素 x 250 像素的图块，图块（行和列）之间的间隙相等。在花了几个小时试图达到我想要的结果之后，我得出的结论是 Flex 在这种情况下不起作用。我有一个父 div 和 8 个子 div。任何建议将不胜感激！

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-flow: row wrap;
  justify-content: space-between;
}

.children {
  border: 2px solid black;
  width: 250px;
  height: 250px;
}

<article class="parent">

  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>

</article>

标签： cssflexboxcss-grid

Answer 1

在这gap组属性可用于 flexbox 之前，您需要设法找到解决方案。

但是，网格布局很简单。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-auto-rows: 250px;
  grid-gap: 10px; <----- key rule
}
.children{
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<article class="parent">
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
</article>