Как исправить адаптивную кладку размера

ProgramBox

Как исправить адаптивную кладку размера

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

У меня простая кладка CSS, и когда я уменьшаю размер экрана, второй блок ( item2 ) слишком мал по размеру. Как изменить размер блоков на полную ширину с медиа-запросом или без него?

 body {
  font-family: sans-serif;
  background-color: #1b1b1b;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(180px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-item {
  padding: 1rem;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #929796;
  background-color: #333;
  border-radius: 5px;
}
.grid-item:nth-child(odd) {
  background-color: #424242;
}

.big {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

 <div class="grid-layout">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item big">item 3</div>
    <div class="grid-item">item 4</div>
    <div class="grid-item">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item">item 8</div>
    <div class="grid-item big">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item">item 13</div>
    <div class="grid-item">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item">item 19</div>
    <div class="grid-item">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item">item 23</div>
</div>

1. когда ширина экрана не может вместить два столбца, вы видите эту проблему… итак, с помощью медиа-запроса вы хотите поместить второй столбец ниже первого?

2. нет, я хочу, чтобы только все элементы отображались во всю ширину.

3. Проблема в том, что макет сетки чрезмерно ограничен: — с одной стороны, доступная ширина меньше, чем для двух столбцов по 180 пикселей каждый (потому что вы задали свои столбцы как grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) ) — второй item нужно перенести в следующую строку; — с другой стороны, третий .item.big ввторая строка охватывает два столбца, что заставляет макет содержать второй столбец.

4. я не понимаю, извините. Как это исправить?

5. вы можете использовать медиа-запрос, см. Ответ ниже..

Ответ №1:

Проблема в том, что макет сетки чрезмерно ограничен в соответствии с моими комментариями выше:

с одной стороны, доступная ширина меньше, чем для хранения двух столбцов по 180 пикселей в каждом (потому что вы установили свои столбцы как grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) ) — второй item нужно перенести в следующую строку;
с другой стороны, третий .item.big во второй строке занимает два столбца, что заставляет макет содержать второй столбец.

И у вас есть проблема ниже ~ 425 пикселей и около того — если вы хотите настроить таргетинг на этот экран, вы можете попробовать медиа-запрос, чтобы настроить свои big элементы так, чтобы они охватывали только первый столбец при небольшой ширине экрана — см. Демонстрацию ниже:

 body {
  font-family: sans-serif;
  background-color: #1b1b1b;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(180px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-item {
  padding: 1rem;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #929796;
  background-color: #333;
  border-radius: 5px;
}
.grid-item:nth-child(odd) {
  background-color: #424242;
}

.big {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

@media only screen and (max-width: 450px) { /* added */
  .big {
    grid-column: 1;
  }
}

 <div class="grid-layout">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item big">item 3</div>
    <div class="grid-item">item 4</div>
    <div class="grid-item">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item">item 8</div>
    <div class="grid-item big">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item">item 13</div>
    <div class="grid-item">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item">item 19</div>
    <div class="grid-item">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item">item 23</div>
</div>

1. Большое спасибо! У меня есть еще один вопрос: могу ли я показывать div первым из других divs при добавлении класса «sticky»? Как я могу это сделать?

2. Да, на данный момент «липкий» класс не существует. Но как я могу это сделать?

3. Извините, но я вас не понимаю, возможно, вы можете опубликовать еще один вопрос с минимальным и проверяемым фрагментом?

4. Я хочу, чтобы при добавлении класса «sticky» в div этот div был первым в списке заказов

5. добавить grid-row: 1 и grid-column: 1 поместить этот div в первую строку / столбец?