Question

我的问题与此question,相同，但是给定的解决方案不起作用。

这是我正在使用的codepen。

我尝试了两种不同的方法，这两种方法几乎都是正确的，但并不完全正确：

1。将::before和::after伪类应用于第一个和最后一个网格项

不幸的是，当我分别向第一个网格项目和最后一个网格项目添加margin-left和margin-right属性时，它会向网格项目添加空间，就好像它是padding空间而不是{{ 1}}空间，否则可以正常工作。

2。将margin和::before伪类应用于网格容器

不允许我操纵::after中的width。由于某些原因，::before的{{1}}属性无效。显然，它的width的值似乎与任何给定的网格项目的::before值相同。

我也注意到这种方法的另一个特殊之处，最终是无关紧要的。如果我将width应用于width，则width也会像插入不可见的网格项一样被应用。

::after

grid-gap

有人知道为什么会发生这种事吗？

如何更改:root { --gap: 25px; } body { width: 100vw; overflow-x: hidden; margin: 0 } #c { width: 100%; height: 50px; overflow-x: auto; display: grid; grid-gap: 20px; grid-auto-flow: column; grid-auto-columns: calc(calc(100% - calc(var(--gap) * 2)) / 1.5); border: solid red 1px; } /* second approach */ #c::before { content: ''; width: var(--gap); } #c::after { content: ''; width: 1px; /* works out to about 25px or var(--gap) */ } .i { width: 100%; height: 25px; } /* first approach */ /* .i:first-child::before { content: ''; margin-left: var(--gap); } .i:last-child::after { content: ''; margin-right: var(--gap); } */ .i:nth-child(odd) { background: skyblue; } .i:nth-child(even) { background: pink; }的宽度？

Answer 1

一个改变before宽度的想法是定义一个像下面这样的列模板，该模板将强制第一个元素的宽度，然后另一个将跟随grid-auto-columns。基本上，我们定义一个具有1列的显式网格，然后浏览器将根据需要添加更多列以创建隐式网格：

:root {
  --gap: 25px;
}

body {
  width: 100vw;
  overflow-x: hidden;
  margin: 0
}

#c {
  width: 100%;
  height: 50px;
  overflow-x: auto;
  display: grid;
  grid-gap: 20px;
  grid-template-columns:1px;
  grid-auto-flow: column;
  grid-auto-columns: calc(calc(100% - calc(var(--gap) * 2)) / 1.5);
  border: solid red 1px;
}

/* second approach */
#c::before {
  content: '';
}

#c::after {
  content: '';
  width: 1px; /* works out to about 25px or var(--gap) */
}

.i {
  /*width: 100%; not needed*/
  height: 25px;
  /*display: inline-block; not needed*/
}

.i:nth-child(odd) {
  background: skyblue;
}

.i:nth-child(even) {
  background: pink;
}

<div id='c'>
  <div class='i'>1</div>
  <div class='i'>2</div>
  <div class='i'>3</div>
  <div class='i'>4</div>
  <div class='i'>5</div>
  <div class='i'>6</div>
  <div class='i'>7</div>
  <div class='i'>8</div>
  <div class='i'>9</div>
  <div class='i'>10</div>
  <div class='i'>11</div>
  <div class='i'>12</div>
  <div class='i'>13</div>
  <div class='i'>14</div>
  <div class='i'>15</div>
  <div class='i'>16</div>
  <div class='i'>17</div>
  <div class='i'>18</div>
  <div class='i'>19</div>
  <div class='i'>20</div>
  <div class='i'>21</div>
  <div class='i'>22</div>
  <div class='i'>23</div>
  <div class='i'>24</div>
</div>

Answer 2

这是another one of those instances，其中flexbox可以提供一种更简单，更轻松和更有效的网格解决方案。

:root {
  --gap: 25px;
}

#c {
  display: flex;
  overflow-x: auto;
  height: 50px;
  border: solid red 1px;
}

.i {
  height: 25px;
  flex: 0 0 calc(calc(100% - calc(var(--gap) * 2)) / 1.5); /* fg, fs, fb */
}

#c::before {
  content: '';
  flex: 0 0 var(--gap);
}

.i {
  margin-right: 20px;
}

#c::after {
  content: '';
  flex: 0 0 calc(var(--gap) - 20px); /* gap less margin */
}

.i:nth-child(odd)  { background: skyblue; }
.i:nth-child(even) { background: pink; }
body               { margin: 0; }
*                  { box-sizing: border-box; }

<div id='c'>
  <div class='i'>1</div>
  <div class='i'>2</div>
  <div class='i'>3</div>
  <div class='i'>4</div>
  <div class='i'>5</div>
  <div class='i'>6</div>
  <div class='i'>7</div>
  <div class='i'>8</div>
  <div class='i'>9</div>
  <div class='i'>10</div>
  <div class='i'>11</div>
  <div class='i'>12</div>
  <div class='i'>13</div>
  <div class='i'>14</div>
  <div class='i'>15</div>
  <div class='i'>16</div>
  <div class='i'>17</div>
  <div class='i'>18</div>
  <div class='i'>19</div>
  <div class='i'>20</div>
  <div class='i'>21</div>
  <div class='i'>22</div>
  <div class='i'>23</div>
  <div class='i'>24</div>
</div>

您可能还需要考虑使用透明边框作为开始侧和结束侧的间距。 Last margin / padding collapsing in flexbox / grid layout

在第一个和最后一个网格项之前和之后添加空间

2 个答案: