Revolutsio Posted May 26, 2022 Share Posted May 26, 2022 i have a grid container with the following sizes .container { display: grid; grid-template-columns: 200px 1200px 420px; gap: 10px; } .row { border: 1px solid aliceblue; border-radius: 5px; background-clip: border-box; position: relative; background-color: darkslategrey; } In the middle grid i want to add 4 images of 400x225 side by side. how do i do this please Quote Link to comment https://forums.phpfreaks.com/topic/314839-images-side-by-side-in-a-grid/ Share on other sites More sharing options...
Solution maxxd Posted May 26, 2022 Solution Share Posted May 26, 2022 (edited) You'll need to build an inner div, place it in the middle, column. Set the inner div to grid and style from there. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing Grid</title> <style> *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-content: center; background: teal; } .outer-container{ background: lightcoral; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 100px; gap: 10px; justify-items: center; align-items: center; } .inner-container{ background: yellow; grid-column: 2 / 3; display: grid; grid-template-columns: repeat(2, 50%); grid-template-rows: auto; gap: 20px; } .block{ background-color: blue; padding: 20px; } </style> </head> <body> <section class="outer-container"> <div class="inner-container"> <div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div> <div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div> <div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div> <div class="block"><img src="http://fpoimg.com/300x250?text=Preview" alt=""></div> </div> </section> </body> </html> Pardon the eye-searing colors; I like to be able to see what I'm doing... Your mileage may vary with the widths you're using - I'm testing on a surface tablet so the screen is smaller. Edited May 26, 2022 by maxxd Quote Link to comment https://forums.phpfreaks.com/topic/314839-images-side-by-side-in-a-grid/#findComment-1596711 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.