网格项目的高度不同

时间：2019-04-06 07:44:18

标签： html css css3 alignment css-grid

我正在尝试创建一个简单的网格布局，但是对我来说一件事是行不通的。所有图像的宽度和高度都不同，它们的宽度不会超出单元格，但是高度会像这样：

.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 个答案:

答案 0 :(得分：1)

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

  • 自动设置网格行（只需删除grid-template-rows定义即可-还要从{{1中删除网格线名称[row] }}定义）

  • 现在对图像使用grid-row，使用以下方法填充：

    object-fit: cover

  • 还请注意，最后一个网格行是6，而不是5，因为您的第四行项目 span 是两行（或者您可以删除跨度（第四行）

请参见下面的演示

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

.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 */
}

答案 1 :(得分：1)

您可以将图像的宽度和高度设置为100％，如下所示：

import tkinter
from tkinter import *
import os
from tkinter import ttk
from tkinter.ttk import *

window = tkinter.Tk()

text = Text(window)

def save():
    print("Save")

def load():
    print("Load")
def printcom():
    print("Print")


savebut = ttk.Button(window, text = "Save", command = save)
loadbut = ttk.Button(window, text = "Load", command = load)
printbut = ttk.Button(window, text = "Print", command = printcom)



savebut.grid(row=0,column=0,columnspan=1)
loadbut.grid(row=0,column=1, columnspan=1)
printbut.grid(row=0,column=2, columnspan=1)
text.grid(row=1,column=3, columnspan = 3)

.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%;
}

相关问题
最新问题