CSS Grid Mystery Whitespace

Question

Я пытаюсь создать сетку изображений с помощью CSS-Grid, и по какой-то причине я получаю таинственное пустое пространство вокруг первых двух элементов в сетке. При проверке изображений я не вижу, чтобы они были помечены как отступы, поля или обычные рамки.

Я пытался удалить гибкий контейнер изнутри сетки, но ничего не изменилось.

В FF и Safari сетка работает, как и ожидалось, но в Chrome она ломается, а также толкает сетку по следующему пункту, который у меня есть на странице, есть идеи?

.sponsor-div {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 25% auto auto;
}

.sponsor-div a {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 200px;
}

.sponsor-div img {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
  transition: all 0.2s ease;
  max-width: 150px;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.sponsor-div img:hover {
  transform: scale(1.3);
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

<div class="sponsor-div">
  <a href="http://equalityequation.co/"><img style="padding-top: 50px;" src="../img/EQ_Mark_Orange.png"></a>
  <a href="https://www.veggiemijas.com/"><img style="padding-top: 50px;" src="https://format-com-cld-res.cloudinary.com/image/private/s--SzQAA2I9--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive.apng/v1/9f726015881c70a0259861da1b288ab1/VM_Logo.png"></a>
  <a href="https://www.imatteryouth.org/"><img style="padding-top: 50px;" src="http://www.imatteryouth.org/wp-content/uploads/2016/02/new-imatter-logo-2.png"></a>
  <!--- A bunch of other <img>s inside <a> tags --->
</div>

Answer 1

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

В вашей структуре HTML есть три уровня:

1. Основной контейнер(.sponsor-div)
2. Элементы сетки / вложенные гибкие контейнеры (a)
3. Гибкие элементы (img)

Проблема заключается в том, чтовы применяете свойства сетки к внукам контейнера сетки.

Свойства сетки работают только в рамках отношения родитель-потомок. Контейнер сетки является родительским.Элементы сетки - это дети.

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

Подробнее: Свойства сетки не работают с элементами внутри контейнера сетки

Answer 2

На самом деле вы используете свойство minmax в сетке и в сетке. Первое значение свойства minmax в min-width, а второе - max-width.Вы дали минимальную ширину 200 пикселей, так что весь внутренний элемент взял минимальную ширину 200 пикселей.Таким образом, если вы уменьшите минимальную ширину, то пространство между элементами уменьшится.

.sponsor-div {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-template-rows: 25% auto auto;
}

.sponsor-div a{
    display: flex;
    justify-content: center;
  align-items: center;
  max-height: 200px;
}

.sponsor-div img{
    grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
    grid-row-end: 3;
    transition: all 0.2s ease;
    max-width: 150px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.sponsor-div img:hover {
    transform: scale(1.3);
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

<div class="sponsor-div">
          <a href="http://equalityequation.co/"><img  style="padding-top: 50px;"src="https://format-com-cld-res.cloudinary.com/image/private/s--SzQAA2I9--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive.apng/v1/9f726015881c70a0259861da1b288ab1/VM_Logo.png"></a>
          <a href="https://www.veggiemijas.com/"><img style="padding-top: 50px;" src="https://format-com-cld-res.cloudinary.com/image/private/s--SzQAA2I9--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive.apng/v1/9f726015881c70a0259861da1b288ab1/VM_Logo.png"></a>
          <a href="https://www.imatteryouth.org/"><img style="padding-top: 50px;"src="http://www.imatteryouth.org/wp-content/uploads/2016/02/new-imatter-logo-2.png"></a>
<!--- A bunch of other <img>s inside <a> tags --->
</div>