CSS столбцы имеют горизонтальный зазор? - PullRequest
Новая
       8

CSS столбцы имеют горизонтальный зазор?

0 голосов
/ 04 февраля 2020

У меня возникла проблема при попытке выровнять css столбцы и сетку. По умолчанию в столбцах css есть некоторый горизонтальный зазор.

Не могу понять, почему .. Кто-нибудь может объяснить, что происходит? Как это исправить? Спасибо! 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.grid>div {
  height: 40px;
}

.css-cols {
  columns: 4;
  list-style: none;
  margin: 0;
  padding: 0;
}

.css-cols li {
  height: 20px;
  margin-bottom: 5px;
}

.grid>div:nth-child(odd),
.css-cols li:nth-child(odd) {
  background: black;
}

.grid>div:nth-child(even),
.css-cols li:nth-child(even) {
  background: red;
}
<div class="grid">
  <div></div>
  <div></div>
</div>

<ul class="css-cols">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Ответы [ 3 ]

1 голос
/ 04 февраля 2020

Да. Но вы можете избавиться от него, установив column-gap на 0: 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.grid>div {
  height: 40px;
}

.css-cols {
  columns: 4;
  column-gap:0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.css-cols li {
  height: 20px;
  margin-bottom: 5px;
}

.grid>div:nth-child(odd),
.css-cols li:nth-child(odd) {
  background: black;
}

.grid>div:nth-child(even),
.css-cols li:nth-child(even) {
  background: red;
}
<div class="grid">
  <div></div>
  <div></div>
</div>

<ul class="css-cols">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Интервал браузера по умолчанию используется между столбцами. Для многостолбцовой разметки это указывается как 1em.

0 голосов
/ 04 февраля 2020

В этом вы можете использовать для пробела столбца 

grid-column-gap

, а для строки вы можете использовать 

grid-row-gap

, и я предлагаю вам использовать эту комбинацию клавиш 

grid-gap

для строки и столбца

0 голосов
/ 04 февраля 2020

Хах .. Неважно. После еще одного поиска я нашел свойство css column-gap. При настройке column-gap: 0 проблема устранена. Я думаю, что браузер добавил некоторое значение по умолчанию. 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.grid>div {
  height: 40px;
}

.css-cols {
  columns: 4;
  column-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.css-cols li {
  height: 20px;
  margin-bottom: 5px;
}

.grid>div:nth-child(odd),
.css-cols li:nth-child(odd) {
  background: black;
}

.grid>div:nth-child(even),
.css-cols li:nth-child(even) {
  background: red;
}
<div class="grid">
  <div></div>
  <div></div>
</div>

<ul class="css-cols">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Надеюсь, это может помочь другим с такой же проблемой.

...