Question

我需要一个响应式CSS网格，该网格最多包含三列，至少包含一列，以使每列之间具有相等的空间。只需一行，使用flexbox和justify-content: space-evenly即可轻松完成此操作，如下所示：

Even Spacing Using FlexBox

但是我需要多行。 那我如何使用CSS网格获得均匀的列间距？

这是我目前使用网格的内容。左边缘和右边缘的边距是内边缘的一半

No Even Spacing With Grid

我已经考虑过在网格中的每一行使用一个flexbox，但是这个主意听起来像是更多的工作而不是值得的。谢谢

JSFiddle

Answer 1

图像之间垂直和水平方向的间距

图像不是网格/柔性容器的直接子代，因此需要进行一些调整以使图像占据其父代的全宽/高。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  /* at least fill the parent */
  min-width: 100%;
  /* don't exceed the parent */
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}

<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

CSS网格

使用CSS网格应该很容易，每行有3个项目，并且四周都有均匀的空间。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  min-width: 100%;
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}

/* Solution */
[container] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:20px; /* even spacing using grid-gap, You can use percentage values if you want*/
    padding:20px;
}


[item]{
    padding: 10px;
    background:red;
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}

<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

Flexbox

整rick需要一点照顾

首先，每行需要3个项目，我们可以这样说，就像CSS网格一样，因此我们进行计算时，将每个项目的宽度设为父级flex-basis:calc(100% / 3);的总宽度的三分之一

第二，我们使用边距margin:20px添加周围的空间，现在比较棘手的一点是，边距增加了商品的宽度，因此我们需要从容器的整体宽度中减去该空间，然后计算第三个将成为flex-basis(100% - (20px * 6)) / 3);

6，因为每个元素在左边{/ 2 x 3=6}处都有两个边距

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  min-width: 100%;
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}

/* Solution */
[container] {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
   
}


[item]{
    padding: 10px;
    background:red;
    flex:0 0 calc((100% - (20px * 6)) / 3);
    margin:20px; 
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}

<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

使用CSS网格均匀分布的图像

1 个答案:

CSS网格

Flexbox