rendering multiple images inside a div with differing sizes | Scrimba | Page 1

torn patio Dec 28, 2023, 5:04 PM

#

does anyone know how to make it so that it would look like this:
as opposed to this, where each image is stacked on top of each other?:
i want the images to take up equal spacing despite their different range in width and height, as shown in the first photo

#

sterile linden Dec 28, 2023, 5:09 PM

#

Hi @torn patio I would say using grid is the best way to achieve this look

torn patio Dec 28, 2023, 5:09 PM

#

okay, i havent learnt that yet in my course but will have a look at that now!

sterile linden Dec 28, 2023, 5:10 PM

#

You will certainly get to grid and its a great tool! A quick google will give you some info on it. This is a resource I use alot https://css-tricks.com/snippets/css/complete-guide-grid/

CSS-Tricks

Chris House

A Complete Guide to CSS Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

torn patio Dec 28, 2023, 5:11 PM

#

thank you!

sterile linden Dec 28, 2023, 5:11 PM

#

You will learn grid in module 6

sonic turtle Dec 29, 2023, 4:26 PM

#

Object-fit: cover for img tags and background-size: cover for bg images can help make sure your images don’t stretch in the container

#rendering multiple images inside a div with differing sizes