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

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

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

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>

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

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

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, кроме добавления медиа-запроса?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
595
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

Спасибо за разъяснение

martinval 14.09.2018 15:31
Ответ принят как подходящий

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

Now if you try the same with this example, the items that have left the explicit grid and have to move again are not doing so but are shrinking under the specified minmax value.

«... элементы, вышедшие из явной сетки ...»

Вот почему элементы вашей сетки сжимаются ниже минимального значения 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>

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

Спасибо @Michael_B, я вижу, что на данный момент нет "волшебного" обходного пути. Я считаю, что на этот вопрос ответили, даже если ваше решение частично решает проблему. Элементы сохраняют свой размер, но не полностью переносятся на экран самого маленького размера.

martinval 14.09.2018 15:29

Другие вопросы по теме