Hello fellow developers,
I am looking to build a portfolio website with a gallery layout similar to Instagram, featuring 3 pictures in a row. I attempted to use CSS grid for this purpose. Here is how the grid currently looks: (Note that the 225px column/row serves as a white border, like 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;}
This is my current setup. However, in order for the gallery to display properly, I have to assign a height to the grid container. I used
min-height: 100vh;
but when I add items to a third row of the gallery, the cells do not maintain their height and appear half as tall.
========
My goal is to create a system where I can add an unlimited number of images in rows of three, all with a 1:1 aspect ratio.
You can access the full code here: https://jsfiddle.net/timlwsk/xqfat628/1/
EDIT: Typo