Вопросы Теги

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

Я считаю, что недостаток заключается в том, что HTML - это грамматика Хомского типа 2 (контекстная свободная грамматика) , а RegEx - грамматика Хомского типа 3 (регулярная грамматика) . Поскольку грамматика типа 2 существенно сложнее, чем грамматика типа 3 (см. Иерархию Хомского ), вы не можете выполнить эту работу. Но многие попробуют, некоторые будут претендовать на успех, а другие найдут ошибку и полностью испортят вас.

2
задан Anthony 17 March 2019 в 20:32
поделиться

2 ответа

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

Вы также можете рассмотреть прозрачную границу для начального и конечного разнесения , Последнее сжатие полей / отступов в макете flexbox / grid

0
ответ дан Michael_B 17 March 2019 в 20:32
поделиться

Одна идея изменить ширину до - это определить шаблон столбца, как показано ниже, который будет принудительно устанавливать ширину первого элемента только тогда, когда другой будет следовать 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>
[116 ]
0
ответ дан Temani Afif 17 March 2019 в 20:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: