时间戳

首页 > 解决方案 > 使用css网格均匀分布的图像

html - 使用css网格均匀分布的图像

问题描述

我需要一个响应式 CSS 网格，最多包含三列和至少一列，以便在每列周围有相等的空间。这很容易完成，只需一行，使用 flexbox，justify-content: space-evenly如下所示：

使用 FlexBox 均匀间距

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

这是我目前拥有的网格。最左边和最右边的边距是内边距的一半

网格没有均匀间距

我曾考虑为网格中的每一行使用一个 flexbox，但这个想法听起来可能比它的价值更多。谢谢

JSFiddle

标签： htmlcssflexboxgrid

解决方案

图像之间的垂直和水平间距相等

图像不是 grid/flex 容器的直接子级，因此需要进行一些调整以使图像占据其父级的全宽/高度。

* {
  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>

弹性盒

棘手需要一点小心

首先，我们每行需要 3 个项目，我们可以说就像 css 网格一样，所以我们计算，我们给每个项目的父项总宽度的三分之一flex-basis:calc(100% / 3);

其次，我们使用边距添加空间margin:20px，现在棘手的一点是边距会增加项目的宽度，因此我们需要从容器的总宽度中减去该空间，然后计算第三个将成为flex-basis(100% - (20px * 6)) / 3);

6因为每个元素将有 2 个左/右边距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>

推荐阅读