CSS имеют каждый элемент сетки разной высоты - PullRequest
Новая
       15

CSS имеют каждый элемент сетки разной высоты

1 голос
/ 20 марта 2019

У меня есть сетка из трех столбцов, и высота изменяется, чтобы соответствовать всему тексту. 

.main .contentWrapper {
    height:60%;
    margin-top:5%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
    /*grid-template-rows: auto;*/
    height:auto;
}

.main .contentWrapper .box .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

img {
    object-fit:cover;
    width:100%;
    height:400px;
    margin:0;
}

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

box layout

Ответы [ 2 ]

2 голосов
/ 20 марта 2019

Значение по умолчанию свойства align-items для контейнера сетки равно stretch, что означает, что каждый элемент сетки будет расширяться до высоты строки сетки (к самому большому элементу в строке, если высота не установлена ​​с помощью grid-template-rows).

Чтобы изменить это, вы можете просто добавить align-items: flex-start к сетке контейнера (.contentWrapper) - см. Демонстрацию ниже: 

body {
  background: #ddd;
}

.contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
  align-items: flex-start; /* ADDED */
}

.contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

.box {
  background: #fff;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}
<div class="contentWrapper">
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here</div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here </div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text
      here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>
  </div>
</div>
0 голосов
/ 20 марта 2019

Я решил это, добавив margin-bottom: auto к каждому .contentWrapper .box.Это подтолкнуло текст к изображению и поместил каждую ячейку в соответствии с его содержимым.

enter image description here

.main .contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
}

.main .contentWrapper .box {
  background-color: #eee;
  margin-bottom: auto;
}

.main .contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}
<div class="main">
  <div class="contentWrapper">
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div>
    </div>
  </div>
</div>

jsFiddle

...