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

本文介绍了在第一个和最后一个网格项之前和之后添加空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我的问题与此问题相同，，但是给定的解决方案不起作用。 这里是 codepen 。 我尝试了两种不同的方法，这两种方法几乎都是正确的，但不完全相同： 1。将 :: before 和 :: after 伪类应用于第一个和最后一个网格项 不幸的是，当我添加 margin-left 和 margin-right 属性分别添加到第一个和最后一个网格项目，它将空格添加到网格项目，就好像它是 padding 空间而不是 margin 空格，否则可以正常工作。 2。将 :: before 和 :: after 伪类应用于网格容器 不允许我操纵 ::之前的宽度 。由于某些原因， :: before 的 width 属性不会生效。值得注意的是，其 width 的值似乎与任何给定的网格项目的 width 值相同。应用于 :: after ，则 grid-gap 也会像插入不可见的网格项一样应用。 ：root {-间距：25像素；} body {宽度：100vw;溢出-x：隐藏;边距：0} #c {宽度：100％;高度：50px；溢出-x：自动;显示：网格； grid-gap：20px; grid-auto-flow：列；网格自动列：calc（calc（100％-calc（var（-gap）* 2））/ 1.5）; border：纯红色1px；} / *第二种方法* /＃c :: before {content：’’;宽度：var（-gap）;}＃c ::之后{内容：’’;宽度：1px； / *约为25px或var（-gap）* /}。i {width：100％;高度：25像素；} / *第一种方式* // *。i：first-child :: before {content：’’; margin-left：var（-gap）;}。i：last-child :: after {content：’’;边距右：var（-gap）;} * /。i：nth-​​child（odd）{背景：天蓝；}。i：nth-​​child（even）{背景：粉红色;} < 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 ？ 解决方案一种更改before宽度的想法是定义如下所示的列模板将仅强制第一个元素的宽度，然后另一个将遵循 grid-auto-columns 。基本上，我们定义了一个具有1列的显式网格，然后浏览器会根据需要添加更多列以创建隐式网格： ：root {--gap：25px;} body {width：100vw;溢出-x：隐藏;边距：0} #c {宽度：100％;高度：50px；溢出-x：自动;显示：网格； grid-gap：20px; grid-template-columns：1px; grid-auto-flow：列；网格自动列：calc（calc（100％-calc（var（-gap）* 2））/ 1.5）;边框：红色常亮1px；} / *第二种方法* /＃c ::之前{内容：’；}＃c ::之后{内容：’;宽度：1px； / *大约为25px或var（-gap）* /}。i {/ * width：100％;不需要* /高度：25px； / * display：内联块;不需要* /}。i：nth-​​child（odd）{背景：天蓝色；}。i：nth-​​child（even）{背景：粉红色;} < 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> My question is identical to this question, but the given solution does not work.Here is a codepen of what I'm working with.I've tried two different approaches, both of which are almost correct but not quite:1. Applying ::before and ::after psuedo classes to first and last grid itemsUnfortunately when I add margin-left and margin-right properties to the first and last grid item respectively, it adds the space to the grid items as if it were padding space and not margin space, otherwise this works fine.2. Applying ::before and ::after psuedo classes to grid containerIt will not allow me to manipulate the width of ::before. For some reason the width property of ::before does not take effect. Notably, it seems as if the value of its width is the same width value as any given grid item.I noticed another peculiarity, which is ultimately irrelevant, with this approach too. If I apply a width to ::after, grid-gap also gets applied as if it is inserting an invisible grid item.: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>Does anybody have any idea why this stuff is happening?How can I change the width of ::before? 解决方案 One idea to change the width of before is to define a column template like below that will force the width of the first element only then the other will follow the grid-auto-columns. Basically we define an explicit grid with 1 column then the browser will add more column as needed to create the implicit grid::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> 这篇关于在第一个和最后一个网格项之前和之后添加空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！