Блог

Главная - Вопросы по программированию - Почему эти элементы сетки заполняют все вертикальное пространство?

Почему эти элементы сетки заполняют все вертикальное пространство?

#html #css #css-grid

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

Вопрос:

Вот как выглядит моя страница:

введите описание изображения здесь

Почему столбец «эскизы» заполняет вертикальное пространство? Когда строк меньше пяти, изображения разделяются между верхней и нижней частями пространства. Я хочу, чтобы они заполняли пространство сверху донизу, оставляя лишнее пространство внизу.

Это дает мне мой вертикальный разрыв в 20 пикселей вместо равномерного разделения пространства…

 grid-template-rows: auto 1fr;

…но пространство заполнено пустыми строками (см. визуализированную галерею по ссылке выше).

То, что я ищу, — это 20 пикселей между строками и не более, и выравнивание содержимого по верху.

 .gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
     'gallery-slide-div gallery-thumbs-div'
     'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  grid-auto-rows: auto;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  grid-template-rows: auto 1fr;
}

.gallery-img-title {
  text-align: center;
}  
 <div class="gallery">
  <div class="gallery-slide-div">
    <img src="/images/gallery/canvas/large/1.jpg" class="gallery-slide-img">
  </div>
  <div class="gallery-thumbs-div">
    <img src="/images/gallery/canvas/small/1.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/2.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/3.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/4.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/5.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/6.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/7.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/8.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/9.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/10.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/11.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/12.jpg" class="gallery-thumb-img">
  </div>
  <div class="gallery-img-title" id="gallery-1-img-title">
    title
  </div>
</div>

Ответ №1:

Посмотрите на эти строки в коде:

 .gallery-thumbs-div {
    grid-template-rows: auto 1fr;
    grid-auto-rows: auto;
}

Это переводится как:

  1. Первая строка будет высотой содержимого ( auto )
  2. Вторая строка будет занимать все доступное пространство ( 1fr ).

grid-template-rows теперь выполнено, поскольку определено только две строки.

grid-auto-rows теперь начинается.

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

Итак, вторая строка, поскольку она занимает все свободное пространство, прикрепляет последние две строки к нижней части контейнера.

Я бы просто полностью удалил обе строки ( grid-template-rows определяет только две строки и grid-auto-rows: auto уже установлено по умолчанию).

Наконец, добавьте align-content: start , который переопределит align-content: stretch значение по умолчанию.

 .gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
      'gallery-slide-div gallery-thumbs-div'
      'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  /* grid-auto-rows: auto; */
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  /* grid-template-rows: auto 1fr; */
  align-content: start; /* new */
}

.gallery-img-title {
  text-align: center;
}  
 <div class="gallery">
  <div class="gallery-slide-div">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
  </div>
  <div class="gallery-thumbs-div">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">

  </div>
  <div class="gallery-img-title" id="gallery-1-img-title">
    title
  </div>
</div>

Комментарии:

1. Спасибо тебе, Майкл, как за отличное объяснение, так и за рабочее решение.