stackoom
  简体   繁体   中英

Grid items have different height

 原文  2019-04-06 07:44:17  2   2    html/ css/ alignment/ css-grid

Question

I'm trying to create a simple grid layout but one thing doesn't work for me. All images have different width and height, their width doesn't go out of cells but height does, like this: 

 .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>

As I went through a bunch of examples, this approach was supposed to be working. Do I have to add overflow or object-fit to my images?

2 answers

solution1
 1 ACCPTED  2019-04-06 07:57:32

You've adjusted your grid rows based on the image heights which is redundant :

  • make your grid rows auto (just removing grid-template-rows definition will do that - also remove the grid line name [row] from grid-row definitions)

  • now use object-fit: cover for the image to fill the grid item using:

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

  • also the note that your last grid row is 6 and not 5 as your fourth row items span two rows (or you can remove the span for the fourth row)

See demo below: 

 .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>

solution2
 1  2019-04-06 07:57:47

You can set width and height for image to 100%, like this: 

 .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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question product grid, items are with different height Bootstrap grid aligning col that have different height CSS have each grid element a different height Align items with different heights in a grid and have them match lines of alignment Grid with different height images Set grid items to be same height li items of different height How to create grid table 4x3 where two items will have height 50% different height grid system css Make some items twice the height in a flexbox grid
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM