I want to create a template for a simple grid of three images in two columns.
- Column 1: Image A will have
object-fit: cover. It can be cropped and resized as needed. - Column 2: Image B and C must collectively fill the whole height of the screen. They can be cropped at the bottom, but not on the sides or at the top.
Image B and C might have different aspect ratios, and I want to create a piece of code that will fit various ratios. They are also smaller than the final output (ex. they might be 300px in width, but will be displayed at 1000px eventually). Column 2 will then change width based on which aspect ratio images B and C have:
diagram of three possible grid, depending on the aspect ratio of image B and C
I have tried multiple combinations of grid and flexbox, with parameters of 1fr, stretch, max-content, etc... but I can't find the solution. Either image B and C don't fill the full height of column 2, or they do but they are cropped on each side (aka the column does not resize), or they do but appear squished.
I'm not sure if I should do nested grids, or a combination of grid and flexbox, ...
I believe that what must happen is:
- make sure that image B and C have the same width
- increase the size of B and C (and thus column 2 width) until column 2 is completely filled.
- let image A flow and be cropped to fill the remaining space left for column 1.
I just can't figure out how to make that happen :/
Code Snippet.In this snippet, image B is squarish, image C is wide. Using a combination of B+B, B+C or C+C in column 2 would simulate the three options I illustrated in the picture above.
* { box-sizing: border-box;}body { margin: 0; padding: 0;}.template { height: 1000px; width: 1777px; display: grid; grid-template-columns: 1fr max-content;}.column-1 { height: 100%; grid-column: 1 / 2;}.column-1 img { width: 100%; height: 100%; object-fit: cover;}.column-2 { grid-column: 2 / 3;}.column-2 img { width: 100%;}<body><div class="template"><div class="column-1"><img src="https://i.sstatic.net/8MHbl4HT.png" target="_blank"></div><div class="column-2"><img src="https://i.sstatic.net/JCTnUi2C.png" target="_blank"><img src="https://i.sstatic.net/oJW3N1vA.png" target="_blank"></div></div></body>Images for the code snippet: