Блог

Главная - Вопросы по программированию - Почему в моей css-сетке в конце концов есть дополнительная ячейка сетки?

Почему в моей css-сетке в конце концов есть дополнительная ячейка сетки?

#html #css #css-grid

Вопрос:

Почему в последнем разделе есть дополнительные ячейки сетки, когда в моей навигационной панели всего 6 элементов, и один из них находится в первой строке?

введите описание изображения здесь

 body {
  margin: 0;
  padding: 0;
}

.navbar {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.navbar div {
  background-color: rgb(255, 144, 255);
}

.navbar h1 {
  grid-column: 1/-1;
} 
 <div class="container">
  <nav class="navbar">
    <h1>12345</h1>
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
  </nav>
</div>

Комментарии:

1. из-за столбца сетки:1/-1 на элементе h1, делающем автоматическую подгонку, ведет себя так же, как автоматическая заливка

2. итак, что я должен добавить/заменить, чтобы удалить эти дополнительные ячейки сетки

Метки: