Элементы сетки имеют разную высоту - PullRequest
Новая
       9

Элементы сетки имеют разную высоту

2 голосов
/ 06 апреля 2019

Я пытаюсь создать простой макет сетки, но одна вещь не работает для меня.Все изображения имеют разную ширину и высоту, их ширина не выходит за пределы ячеек, а высота - вот так: 

.grid__container {
  display: grid;
  width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(12, [col] 1fr);
  grid-template-rows: [row] 150px [row] 165px [row] 150px [row] 185px [row] 135px;
  grid-gap: 1rem;
}

.grid__item__1 {
  grid-column: col 1 / span 6;
  grid-row: row 1;
}

.grid__item__2 {
  grid-column: col 7 / span 6;
  grid-row: row 1;
}

.grid__item__3 {
  grid-column: col 1 / span 6;
  grid-row: row 2 / span 2;
}

.grid__item__4 {
  grid-column: col 7 / span 2;
  grid-row: row 2;
}

.grid__item__5 {
  grid-column: col 9 / span 2;
  grid-row: row 2;
}

.grid__item__6 {
  grid-column: col 11 / span 2;
  grid-row: row 2;
}

.grid__item__7 {
  grid-column: col 7 / span 3;
  grid-row: row 3;
}

.grid__item__8 {
  grid-column: col 10 / span 3;
  grid-row: row 3;
}

.grid__item__9 {
  grid-column: col 1 / span 4;
  grid-row: row 4 / span 2;
}

.grid__item__10 {
  grid-column: col 5 / span 4;
  grid-row: row 4 / span 2;
}

.grid__item__11 {
  grid-column: col 9 / span 2;
  grid-row: row 4 / span 2;
}

.grid__item__12 {
  grid-column: col 11 / span 2;
  grid-row: row 4 / span 2;
}

.grid__item__13 {
  grid-column: col 1 / span 2;
  grid-row: row 5;
}

.grid__item__14 {
  grid-column: col 3 / span 6;
  grid-row: row 5;
}

.grid__item__15 {
  grid-column: col 9 / span 4;
  grid-row: row 5;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="styles/grid.css">
    <link rel="stylesheet" href="styles/normalize.css">
</head>
<body>

    <main>
      <div class="grid__container">
        <div class="grid__item__1">
          <img src="https://via.placeholder.com/600x150.png/b3dfbe">
        </div>
        <div class="grid__item__2">
          <img src="https://via.placeholder.com/600x150.png/75c5b8">
        </div>
        <div class="grid__item__3">
          <img src="https://via.placeholder.com/600x320.png/f16789">
        </div>
        <div class="grid__item__4">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__5">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__6">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__7">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__8">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__9">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__10">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__11">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__12">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__13">
          <img src="https://via.placeholder.com/200x145.png/6653af">
        </div>
        <div class="grid__item__14">
          <img src="https://via.placeholder.com/600x135.png/6653af">
        </div>
        <div class="grid__item__15">
          <img src="https://via.placeholder.com/400x135.png/6653af">
        </div>
      </div>
    </main>

</body>
</html>

Когда я просмотрел кучу примеров, этот подход должен был работать.Нужно ли добавлять overflow или object-fit к моим изображениям?

Ответы [ 2 ]

1 голос
/ 06 апреля 2019

Вы можете установить ширину и высоту для изображения на 100%, например: 

.grid__container {
  display: grid;
  width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(12, [col] 1fr);
  grid-template-rows: [row] 150px [row] 165px [row] 150px [row] 185px [row] 135px;
  grid-gap: 1rem;
}

.grid__item__1 {
  grid-column: col 1 / span 6;
  grid-row: row 1;
}

.grid__item__2 {
  grid-column: col 7 / span 6;
  grid-row: row 1;
}

.grid__item__3 {
  grid-column: col 1 / span 6;
  grid-row: row 2 / span 2;
}

.grid__item__4 {
  grid-column: col 7 / span 2;
  grid-row: row 2;
}

.grid__item__5 {
  grid-column: col 9 / span 2;
  grid-row: row 2;
}

.grid__item__6 {
  grid-column: col 11 / span 2;
  grid-row: row 2;
}

.grid__item__7 {
  grid-column: col 7 / span 3;
  grid-row: row 3;
}

.grid__item__8 {
  grid-column: col 10 / span 3;
  grid-row: row 3;
}

.grid__item__9 {
  grid-column: col 1 / span 4;
  grid-row: row 4;
}

.grid__item__10 {
  grid-column: col 5 / span 4;
  grid-row: row 4;
}

.grid__item__11 {
  grid-column: col 9 / span 2;
  grid-row: row 4;
}

.grid__item__12 {
  grid-column: col 11 / span 2;
  grid-row: row 4;
}

.grid__item__13 {
  grid-column: col 1 / span 2;
  grid-row: row 5;
}

.grid__item__14 {
  grid-column: col 3 / span 6;
  grid-row: row 5;
}

.grid__item__15 {
  grid-column: col 9 / span 4;
  grid-row: row 5;
}

img {
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="styles/grid.css">
    <link rel="stylesheet" href="styles/normalize.css">
</head>
<body>

    <main>
      <div class="grid__container">
        <div class="grid__item__1">
          <img src="https://via.placeholder.com/600x150.png/b3dfbe">
        </div>
        <div class="grid__item__2">
          <img src="https://via.placeholder.com/600x150.png/75c5b8">
        </div>
        <div class="grid__item__3">
          <img src="https://via.placeholder.com/600x320.png/f16789">
        </div>
        <div class="grid__item__4">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__5">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__6">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__7">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__8">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__9">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__10">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__11">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__12">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__13">
          <img src="https://via.placeholder.com/200x145.png/6653af">
        </div>
        <div class="grid__item__14">
          <img src="https://via.placeholder.com/600x135.png/6653af">
        </div>
        <div class="grid__item__15">
          <img src="https://via.placeholder.com/400x135.png/6653af">
        </div>
      </div>
    </main>

</body>
</html>
1 голос
/ 06 апреля 2019

Вы отрегулировали строк сетки на основе высоты изображения, которая избыточна :

  • сделайте ваши строки сетки автоматическими (для этого достаточно просто удалить определение grid-template-rows - также удалите строку сетки имя [row] из определений grid-row)

  • теперь используйте object-fit: cover для изображения, чтобы заполните элемент сетки, используя: 

    img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block; /* removes whitespace characteristic of inline elements */
}

  • также обратите внимание, что ваша последняя строка сетки равна 6, а не 5 как элементы четвертой строки span две строки (или вы можете удалить span для четвертого ряда)

См. Демо ниже: 

.grid__container {
  display: grid;
  width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(12, [col] 1fr);
  /* grid-template-rows: [row] 150px [row] 165px [row] 150px [row] 185px [row] 135px;*/
  grid-gap: 1rem;
}

.grid__item__1 {
  grid-column: col 1 / span 6;
  grid-row: 1;
}

.grid__item__2 {
  grid-column: col 7 / span 6;
  grid-row: 1;
}

.grid__item__3 {
  grid-column: col 1 / span 6;
  grid-row: 2 / span 2;
}

.grid__item__4 {
  grid-column: col 7 / span 2;
  grid-row: 2;
}

.grid__item__5 {
  grid-column: col 9 / span 2;
  grid-row: 2;
}

.grid__item__6 {
  grid-column: col 11 / span 2;
  grid-row: 2;
}

.grid__item__7 {
  grid-column: col 7 / span 3;
  grid-row: 3;
}

.grid__item__8 {
  grid-column: col 10 / span 3;
  grid-row: 3;
}

.grid__item__9 {
  grid-column: col 1 / span 4;
  grid-row: 4 / span 2;
}

.grid__item__10 {
  grid-column: col 5 / span 4;
  grid-row: 4 / span 2;
}

.grid__item__11 {
  grid-column: col 9 / span 2;
  grid-row: 4 / span 2;
}

.grid__item__12 {
  grid-column: col 11 / span 2;
  grid-row: 4 / span 2;
}

.grid__item__13 {
  grid-column: col 1 / span 2;
  grid-row: 6; /* changed from row 5 to 6 */
}

.grid__item__14 {
  grid-column: col 3 / span 6;
  grid-row: 6; /* changed from row 5 to 6 */
}

.grid__item__15 {
  grid-column: col 9 / span 4;
  grid-row: 6; /* changed from row 5 to 6 */
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block; /* removes whitespace characteristic of inline elements */
}
<main>
  <div class="grid__container">
    <div class="grid__item__1">
      <img src="https://via.placeholder.com/600x150.png/b3dfbe">
    </div>
    <div class="grid__item__2">
      <img src="https://via.placeholder.com/600x150.png/75c5b8">
    </div>
    <div class="grid__item__3">
      <img src="https://via.placeholder.com/600x320.png/f16789">
    </div>
    <div class="grid__item__4">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__5">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__6">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__7">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__8">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__9">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__10">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__11">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__12">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__13">
      <img src="https://via.placeholder.com/200x145.png/6653af">
    </div>
    <div class="grid__item__14">
      <img src="https://via.placeholder.com/600x135.png/6653af">
    </div>
    <div class="grid__item__15">
      <img src="https://via.placeholder.com/400x135.png/6653af">
    </div>
  </div>
</main>
...