时间戳

首页 > 解决方案 > 在第一个和最后一个网格项之前和之后添加空格

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

问题描述

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

这是我正在使用的代码笔。

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

1.对第一个和最后一个网格项应用::before和伪类::after

不幸的是，当我分别将margin-left和margin-right属性添加到第一个和最后一个网格项时，它会将空间添加到网格项中，就好像它是padding空间而不是margin空间一样，否则效果很好。

2.对网格容器应用::before和伪类::after

它不允许我操纵width. ::before由于某种原因， 的width属性::before不生效。值得注意的是，它的值似乎与任何给定的网格项的值width相同。width

我注意到另一个与这种方法最终无关的特性。如果我应用widthto ::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;
}
<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>

有谁知道为什么会发生这种事情？

我怎样才能改变的宽度::before？

标签： csscss-gridgrid-layout

解决方案

改变 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>

推荐阅读