Сетка контейнера имеет дополнительный столбец после моих элементов сетки без причины - PullRequest
Новая
       11

Сетка контейнера имеет дополнительный столбец после моих элементов сетки без причины

0 голосов
/ 23 сентября 2018

Я новичок в сетках и сейчас занимаюсь реверс-инжинирингом каракули.Я использую контейнер сетки, чтобы содержать все мои элементы.Проблема в том, что после последнего столбца элементов сетки, кажется, есть дополнительный столбец, чтобы занять остальную часть экрана.

Вот как это выглядит:

example

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

Это мой HTML: 

<body>
    <div id="grid-container">
        <div class="grid-item"></div>
        <div class="grid-item" id="case_participants"> 0 participants</div>
    </div>
</body>

Это мой css: 

#grid-container {
  display: grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}

.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 30px;
  text-align: center;
}

Остальные элементы создаются с помощью JavaScript.

1 Ответ

0 голосов
/ 23 сентября 2018

У вас есть пространство справа от вашей сетки, потому что сетки по умолчанию являются блочными элементами, которые занимают 100% ширины своего родителя (в данном случае это тело).Измените стиль контейнера на display: inline-grid;, чтобы его ширина соответствовала размеру его содержимого.Пример фрагмента ниже: 

:root {
  --colNum: 4;
}

#grid-container {
  display: inline-grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}

.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 20px;
  text-align: center;
  padding: 10px;
}
<div id="grid-container">
  <div class="grid-item">names</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...