Изменение размера свойства элементов сетки приводит к перекрытию других элементов сетки - PullRequest
Новая
       11

Изменение размера свойства элементов сетки приводит к перекрытию других элементов сетки

3 голосов
/ 16 апреля 2020

У меня есть CSS сетка, которая установлена ​​на auto-fill столбцы, чтобы отображать столько элементов в строке, сколько поместится.

Это делается с помощью: grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

Я хотел бы иметь возможность изменять размеры выбранных элементов сетки, с которыми я пытаюсь: 

resize: both;
overflow: auto;

Это работает на базовом уровне c, но содержимое будет перекрываться / растягиваться по соседним элементам сетки. при изменении размера по горизонтали:

Unwanted overlapping behaviour

При изменении размера по вертикали строки, расположенные ниже, сдвигаются вниз, поэтому перекрытия нет: Wanted resize behaviour

Это поведение, которое я тоже хочу по горизонтали.

Я понимаю, что это, скорее всего, связано с использованием auto-fill для столбцов, например, когда треки явно определили растягивающие работы одинаково по обеим осям. 

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, 10em);
  /* grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); */
}

.grid>div {
  background-color: #eeeeff;
  padding: 0.5rem;
}

.resize {
  resize: both;
  overflow: auto;
}
<div class="grid">
  <div class="resize">Resize Me</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

JSFiddle

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

Как вы определили, изменение размера работает на элементах, но не на дорожках столбцов. Вот почему вы видите наложение при горизонтальном изменении размера. Столбцы фиксируются на месте, основываясь на правиле grid-template-columns 1 .

. Единственный способ изменить размер дорожек столбцов с помощью элементов - установить для столбцов значение * 1006. * (на основе контента), но это не может сосуществовать с auto-fill или auto-fit 2 .

У вас нет этой проблемы с изменением размера в вертикальном направлении, потому что вы не определили никаких строк. Поэтому для сетки по умолчанию используется значение grid-auto-rows: auto (опять же, для определения размера на основе содержимого), а элементы и дорожки строк изменяют размер в гармонии.

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

Вместо этого попробуйте flexbox, который не является хорошей альтернативой в этом случае (особенно потому, что он все еще не поддерживает свойство gap 3 ). , но это может сделать вас на шаг ближе к вашей цели. 

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid > div {
  width: 10em;
  margin: 5px;
  background-color: #ccc;
  padding: 0.5rem;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid red;
}
<div class="grid">
  <div class="resize">Resize Me</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

jsFiddle demo

Ссылки:

  1. Выравнивание элементов сетки по вся строка / столбец (как могут сгибать элементы)
  2. Почему минимальный контент не работает с автозаполнением или автоподгонкой?
  3. Как установить зазоры (желоба) в гибком контейнере? , Настройка расстояния между гибкими элементами
1 голос
/ 16 апреля 2020

Вы можете использовать flex для достижения этого: 

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid>div {
  border: 1px solid red;
  width: 150px;
}

.grid>div {
  background-color: #eeeeff;
  margin: 1em;
  padding: 10px;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid red;
}
<html>

<body>
  <div class="grid">
    <div class="resize">Resize Me</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>
</body>

</html>
...