網格項目具有不同的高度
[英]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.