网格项目具有不同的高度
[英]Grid items have different height
问题描述
我正在尝试创建一个简单的网格布局，但有一件事对我不起作用。 所有图像都有不同的宽度和高度，它们的宽度不会超出单元格但高度会，如下所示：
.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
1 已采纳 2019-04-06 07:57:32
您已经根据多余的图像高度调整了网格行：
- 使您的网格行自动（只需删除
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 */ }另请注意，您的最后一个网格行是 6 而不是 5，因为您的第四行项目跨越两行（或者您可以删除第四行的跨度）
请参阅下面的演示：
.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>
解决方案2
1 2019-04-06 07:57:47
您可以将图像的宽度和高度设置为 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>
将网格中具有不同高度的项目对齐，并使它们与对齐线匹配
[英]Align items with different heights in a grid and have them match lines of alignment
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.