Я пытаюсь создать полностью адаптивную сетку с элементами разного размера.
Этот пример отлично работает с
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, кроме добавления медиа-запроса?
Самый простой ответ - нет, нельзя. Причина в том, что когда вы комбинируете auto-fill
и minmax(200px, 1fr)
, вы указываете браузеру, отображающему ваш код, создать сетку со столбцами с минимальным размером 200 пикселей и максимальным размером 1 франк. Затем вы говорите своим блокам, чтобы они занимали 2 или 3 столбца, что означает, что они имеют минимальную ширину не менее 400 пикселей или 600 пикселей на большом экране. На небольших экранах правило диапазона начинает терять свое значение, но авто не вступает во владение. По-прежнему необходимо рассчитывать ширину отдельных столбцов с учетом индивидуальных различий ширины .a .b .c
и т. д.
Так что, к сожалению, вам придется использовать медиа-запросы или найти другой тип макета.
В том, что вы написали, есть большой намек на ответ:
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, я вижу, что на данный момент нет "волшебного" обходного пути. Я считаю, что на этот вопрос ответили, даже если ваше решение частично решает проблему. Элементы сохраняют свой размер, но не полностью переносятся на экран самого маленького размера.
Спасибо за разъяснение