Dear fellow developers,
I want to create a portfolo website with an gallery, similar to the one found on instagram with 3 pictures in a row. I tried to utilize css-grid for that. The grid's looking like this: (Please note that the 225px column/row is a white boundary, similar to a passepartout)
grid-template-columns: 225px repeat(3, 1fr) 225px;
grid-template-rows: 225px auto;
above the gallery there are two header elements:
#header-l{grid-row: 1 / 1; grid-column: 2 / 2;}
and
#header-r{grid-row: 1 / 1; grid-column: 3 / span 2;}
That's the state I currently got. However, in order for the gallery to show up, in need to assign a height to the grid-container. I used
min-height: 100vh;
however, when I add items to a third row of the gallery the cells do not keep their height but go half as high.
========
What I want to achieve is a system where I can add an unlimeted amount of images in rows of three, that all have the aspect ratio 1:1.
The full code can be found here: https://jsfiddle.net/timlwsk/xqfat628/1/
EDIT: Typo
Well there's multiple ways to reach your goal. First of all i've tested your code. Would be cool if you could update the images with some random Unsplash images because you can't see any local images on jsfiddle. However if you add the grids 3/2/3/2, 3/3/3/3,... even with 4 it seems to work fine on the fiddle. But let me give you some alternatives.
Solution 1: -> Create rows, that way your grid can start at 1/2/1/2 anytime you create a new row. In your case, your grid is defined in a container so you would want to duplicate that container for every single row (medium nice)
Solution 2: -> You can create a div within your grid that takes the dimensions 2-4 and inside this div, you can create another div (img-wrapper) which is width: calc(100%/3) and make it an inline-block (also add some margin to top and bottom). This way you can create as many image objects as you want and you can even adjust it pretty easy for mobile. Just like @media screen and (max-width:500px) img-wrapper{ width: 100%}. This might be the best solution for you
Solution 3: -> Go for a library such as bootstrap, you can actually adjust anything you want in the variables.scss file