网格项目具有不同的高度

【问题标题】：Grid items have different height网格项目具有不同的高度
【发布时间】：2019-04-06 07:44:17
【问题描述】：

我正在尝试创建一个简单的网格布局，但有一件事对我不起作用。所有图像都有不同的宽度和高度，它们的宽度不会超出单元格但高度会，如下所示：

.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 添加到我的图像吗？

【问题讨论】：

    标签： html css alignment css-grid


    【解决方案1】：

    您已根据冗余的图像高度调整了网格行：

    • 使您的网格行自动（只需删除grid-template-rows 定义即可 - 同时从grid-row 定义中删除网格线名称[row]）李>

    • 现在使用object-fit: cover 为图像填充网格项，使用：

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

    • 还请注意，您的最后一个 grid row 是 6 而不是 5 作为您的第四行项目 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>

    【讨论】：

    • 有趣的是，网格图像的宽度不再匹配它们的宽度/高度尺寸。例如，600x150 现在是 592x148。网格间隙减去剩余的宽度和高度。
    • grid container 有width: 1200px - 这就是原因......它还调整了每个网格行中单元格的整体网格排列和尺寸，以及网格间隙太:)
    • 对。因此，要保持正确的 img 尺寸，您需要考虑所有 grid-gap 宽度空间并添加差异。
    • 也许可以，但我认为出于 纵横比 的考虑以及具有不同大小图像的整体网格布局，我会对这种差异有所放松，因为纵横比很好。 ..
    【解决方案2】：

    您可以将图像的宽度和高度设置为 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>

    【讨论】：

      猜你喜欢
      • 2013-09-20
      • 1970-01-01
      • 2018-10-22
      • 2020-02-17
      • 1970-01-01
      • 1970-01-01
      • 2018-02-12
      • 2015-08-02
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode