Добавьте пробел до и после первого и последнего элементов сетки - PullRequest
Новая
       15

Добавьте пробел до и после первого и последнего элементов сетки

2 голосов
/ 17 марта 2019

Мой вопрос идентичен этому вопросу , но данное решение не работает.

Вот кодовая ручка того, с чем я работаю.

Я пробовал два разных подхода, оба из которых почти правильные, но не совсем:

1.Применение классов ::before и ::after psuedo к первому и последнему элементам сетки

К сожалению, когда я добавляю свойства margin-left и margin-right к первому и последнему элементу сетки соответственно, этодобавляет пространство к элементам сетки, как если бы оно было padding пробелом, а не margin пробелом, в противном случае это работает нормально.

2.Применение классов ::before и ::after psuedo к контейнеру сетки

Это не позволит мне манипулировать width из ::before.По какой-то причине свойство 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;
}
<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?

Ответы [ 2 ]

2 голосов
/ 17 марта 2019

Одна идея изменить ширину до - это определить шаблон столбца, как показано ниже, который будет принудительно устанавливать ширину первого элемента только тогда, когда другой будет следовать за 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>
1 голос
/ 18 марта 2019

Это еще один из тех случаев , где 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>

Возможно, вы также захотите рассмотреть прозрачную рамку для расстояния между начальной и конечной сторонами. Последнее сжатие полей / отступов в флексбоксе / макете сетки

...