在css中使用网格时如何获得元素之间的空间-解网

问：

我是新手，并试图在两个元素之间获得空间。使用时，我得到了预期的结果，但当我使用时，什么也没发生gridalign-content: space-between;justify-content: space-between;

如何更改 CSS 以获得预期的结果？

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

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(143, 123, 123, 0.4);
}

.container {
  border: 2px solid black;
  border-radius: 5px;
  height: 60%;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between;
  /* below is the problem that I am having, I assume that there is supposed to be space between the elements but its not working */
  justify-content: space-between;
}

.container .brightness {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .saturation {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .inversion {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .grayscale {
  width: 70px;
  height: 70px;
  background-color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>stackoverflow questions</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="brightness"></div>
    <div class="saturation"></div>
    <div class="inversion"></div>
    <div class="grayscale"></div>
  </div>
</body>

</html>

HTML CSS 网格

评论

0赞 DarkBee 11/15/2023

"我试图在两个元素之间获得空间“——你这是什么意思？请解释一下你想用这个“空间”做什么，预期的结果是什么？

0赞 tacoshy 11/15/2023

使用正确的属性创建空间：grid-gap。默认情况下，Grid 会利用所有可用空间，这与 flexbox 不同。因此，元素之间的网格中不会有间隙（空间）。

0赞 denis kiplangat 11/15/2023

我希望两个元素粘在左边距上，另外两个元素粘在右边距上。类似于我如何使用两个元素粘在顶部和两个元素粘在底部。align-content: space-between;

0赞 Temani Afif 11/15/2023

auto 代替 1fr

答：

0赞 Nishant Fulara 11/15/2023 #1

您可以做的一件事是，如果您希望这些样式位于容器的末尾，则可以将这些样式添加到饱和度和灰度方块中，或者如果您想在它们之间提供自定义间隙，则可以使用 gap 属性来实现。

.container .saturation{
        width: 70px;
        height: 70px;
        background-color: black;
        display: grid;
        justify-self: end;
    }

.container .grayscale{
    width: 70px;
    height: 70px;
    background-color: black;
    display: grid;
    justify-self: end;
}

评论

0赞 denis kiplangat 11/15/2023

我已经试过了，但它不起作用......jsfiddle.net/camindo/o9rzc1k4/3

0赞 Jeevan ebi 11/15/2023 #2

似乎对网格容器上下文中的工作方式存在误解。align-contentjustify-content

align-content 沿块轴工作（对于基于行的网格，垂直）。
justify-content 沿内联轴工作（对于基于行的网格，水平工作）。

在本例中，由于已在容器中设置，因此它是基于行的网格。因此，会影响垂直间距，并且不会产生可见的效果。grid-template-columnsalign-content: space-between;justify-content: space-between;

如果希望在列之间留出空间，则应调整容器类中的属性：grid-column-gap

.container {
  border: 2px solid black;
  border-radius: 5px;
  height: 60%;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between; /* This affects vertical spacing */
  grid-column-gap: 10px; /* Adjust this value to set the horizontal space between columns */
}

评论

0赞 denis kiplangat 11/15/2023

它的工作原理并不像我想象的那样直观。

0赞 denis kiplangat 11/15/2023

你会如何做到，让所有元素都接触侧面？

0赞 Jeevan ebi 11/15/2023

我很高兴听到它对你有用！我没有让你清楚，请描述你的具体布局，这样我就可以帮助你相应地调整CSS。so that all elements touch the side

0赞 denis kiplangat 11/15/2023

我希望两个元素粘在左边距上，另外两个元素粘在右边距上。与我如何使用 align-content： space-between 相似;两个元素粘在顶部，两个元素粘在底部。看看如何触摸底部和顶部的这个小提琴 jsfiddle.net/camindo/o9rzc1k4/14aligncontent

上一个：在浏览器中检查网格间隙（装订线）[关闭]

下一个：CSS 网格中的列太高，导致网页在高度方面被吹掉