CSS Grid minmax - минимальная ширина не соблюдается

Question

Я пытался создать макет из 3 столбцов, содержащий карточки шириной 1, 2 или 3 столбца.Для этого я использовал CSS Grid с grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Мой полный код здесь: Перо макета

Я получаю странное поведение, когда ширинаконтейнер растет и сжимается.Я ожидаю, что новые столбцы будут добавлены или удалены в зависимости от доступности, чтобы добавить новый столбец минимальной ширины (в данном случае 300px).Это, кажется, не происходит - добавляются новые столбцы с шириной <300 пикселей. </p>

Мой SCSS выглядит следующим образом:

.grid{
  max-width:1020px;
  margin:0 auto;
  padding:10px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap:10px;
}
.card{
  padding: 5px;
  background: #CCC;

  grid-column: auto / span 1;
  &:nth-child(2), &:nth-child(5) {
    grid-column: auto / span 2;
  }
  &:nth-child(1), &:nth-child(6) {
    grid-column: 1 / end;
  }
}

Я пытаюсь сделать что-то, что выходит за рамкивозможности CSS Grid или я что-то не так делаю в своем коде?

Answer 1

Проблема заключается в неявной сетке, которую вы создаете, определяя grid-column:auto / span 2, что означает, что элемент будет занимать 2 столбца, поэтому сетка должна содержать как минимум 2 столбца. Если ширина меньше 300px, вы явно создаете один столбец, а просмотр подразумевает создание другого.

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / end;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

Удаляя это, вы все равно будете иметь проблему из-за grid-column: 1 / end;, что означает, что вы начинаете со столбца 1 до области с именем end, но вы не указали ни одной области с таким именем, поэтому браузер неявно создаст ее.

В приведенном выше примере вы можете четко заметить, что последний столбец не соответствует логике minmax(300px, 1fr), поскольку это столбец, созданный для end

Я подозреваю, что вы хотите использовать grid-column: 1 / -1; что означает от 1 до end :

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / -1;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

---

Чтобы лучше проиллюстрировать обе проблемы, вот упрощенный пример для первой:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:span 2; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}

<div class="box">
<span></span>
<span></span>
</div>

А для второго:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:1/ a_radom_name; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}


.box span:last-child {
  grid-column-end:a_radom_name; /* I can place other element on that column */
}

<div class="box">
<span></span>
<span></span>
</div>

Если вы осмотрите сетку, вы заметите, что у нас будет 2 столбца (один неявный и один явный)

---

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку контейнера сетки. ^исх

Когда элементы сетки расположены за пределами этих границ, контейнер сетки генерирует неявные дорожки сетки , добавляя неявные линии сетки в сетку. Эти линии вместе с явной сеткой образуют неявную сетку. ^исх