автозаполнение и minmax () не работают, когда элементы не одинакового размера

Question

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

Этот пример отлично работает с

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ; 

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

Все элементы одинакового размера и наименьшего размера экрана располагаются друг над другом.

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

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Есть ли способ заставить пример 2 вести себя как пример 1, кроме добавления медиа-запроса?

Answer 1

Существует большой намек на ответ в том, что вы написали:

Теперь, если вы попробуете то же самое с этим примером, элементы, которые покинули явную сетку и должны переместиться сноване делают этого, но сжимаются ниже указанного значения minmax.

"... элементы, которые покинули явную сетку ..."

Вот почему ваши элементы сетки уменьшаются ниже минимального значения minmax, установленного в grid-template-columns.

Если вы не находитесь в явной сетке , выв неявной сетке , а свойство grid-template-columns не действует.

Явная сетка определяется тремя свойствами :

• grid-template-columns
• grid-template-rows
• grid-template-areas

Дорожки в неявной сетке игнорируют эти свойства.Вместо этого они имеют размер grid-auto-rows и grid-auto-columns.

Значение по умолчанию grid-auto-columns равно auto, поэтому элементы сетки уменьшаются до размера содержимого при выходе из явной сетки.

Попробуйте:

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
}

Затем, по желанию, сделайте так, чтобы сетка заполняла пустые ячейки при изменении размера, добавьте также:

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
    grid-auto-flow: dense; /* NEW */
}

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-columns: minmax(200px, 1fr);  /* NEW */
  grid-auto-flow: dense;   /* NEW */
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

пересмотренный кодовый блок

Answer 2

Самый простой ответ - нет, вы не можете. Причина в том, что когда вы комбинируете auto-fill и minmax(200px, 1fr), вы указываете браузеру, что ваш код должен создать сетку со столбцами с минимальным значением 200px и максимальным значением 1fr. Затем вы указываете своим боксам охватывать 2 или 3 столбца, что означает, что они имеют минимальную ширину не менее 400 или 600 пикселей на большом экране. На меньших экранах правило диапазона начинает терять свое значение, но авто не вступает во владение. По-прежнему необходимо рассчитать ширину отдельных столбцов с учетом индивидуальных различий в ширине .a .b .c и т. Д.

Так что, к сожалению, вам нужно будет использовать медиа-запросы или найти другой тип макета.