CSS сетка автоматически заполняет столбцы со значениями c minmax - PullRequest
Новая
       11

CSS сетка автоматически заполняет столбцы со значениями c minmax

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

Я хочу отображать переменное количество изображений одинаковой высоты и размера в симметричной сетке. Используя CSS grid и auto-fill и minmax, я надеялся, что смогу определить минимальную и максимальную ширину пикселя для моих треков, чтобы я мог предотвратить слишком маленькое масштабирование изображения, при этом поместив столько изображений на одном строка, как позволяет окно просмотра пользователей. Учитывая следующую разметку: 

    <div class="gallery">
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
      <a href="">
        <img src="https://via.placeholder.com/300/300" alt="">
      </a>
    </div>

Там, где каждое изображение имеет внутренние c размеры 300 x 300 пикселей, я ожидал, что следующие CSS достигнут этого: 

img {
  max-width: 100%;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 300px));
  grid-gap: 1rem;
}

Однако я вижу, что дорожки не масштабируются от 300 до 210 пикселей, вместо этого дорожка оборачивается, как только 300 пикселей не могут быть размещены.

Однако я могу достичь желаемого результата, используя вместо этого max-content . 

img {
  max-width: 100%;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, max-content));
  grid-gap: 1rem;
}

Но max-content будет максимальной шириной, которую будет занимать изображение, и это должно быть 300px, поэтому я не понимаю, почему при использовании значения stati c 300px это не так аффекта.

1 Ответ

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

Сложная ситуация, потому что minmax стремится к значению по умолчанию max значение , и кажется, что это то, что браузер учитывает при запуске переноса.

I думаю, что лучший доступный в настоящее время подход - это использовать max-content на контейнере (как у вас), а затем управлять max-width изображения на уровне элемента сетки.

Кроме того, переключитесь с auto-fill до auto-fit, так что пустые дорожки свернуты и есть место для max-width для работы. 

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  grid-gap: 1rem;
}

a {
  max-width: 300px;
}

img {
  width: 100%;
}
<div class="gallery">
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
  <a href="">
    <img src="https://via.placeholder.com/300/300" alt="">
  </a>
</div>

jsFiddle demo

...