Can a never-ending CSS grid be used to design a unique gallery layout?

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

Answer №1

After testing your code, I found multiple ways to achieve your goal. It would be beneficial to update the images with random Unsplash images as local images are not viewable on jsfiddle. Even when using grids like 3/2/3/2 or 3/3/3/3, it seems to function properly on the fiddle. Here are some alternative solutions for you:

Solution 1: -> Create rows so that your grid can begin at 1/2/1/2 whenever a new row is added. Since your grid is defined within a container, duplicating the container for each row would be necessary (a decent solution).

Solution 2: -> Within your grid, create a div with dimensions 2-4. Inside this div, add another div (img-wrapper) with width: calc(100%/3) and display it as an inline-block (also include top and bottom margins). This method allows for the creation of multiple image objects with easy adjustments for mobile responsiveness. For example, @media screen and (max-width:500px) img-wrapper{ width: 100%}. This could potentially be the most suitable solution for your needs.

Solution 3: -> Consider utilizing a library like Bootstrap, where customization can be easily done in the variables.scss file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a section of text to flow around a floated image within a paragraph

https://i.sstatic.net/s5aFq.png How can I achieve the text wrapping above an image similar to the layout in the sunflower picture? I have tried using relative positioning and adjusting the top property, but it doesn't allow the text to wrap around th ...

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Currently, I am attempting to implement the code for ramjet from . However, I am facing an issue where element a does not disappear when transitioning into b. Additionally, I am encountering an error message "--Uncaught TypeError: Cannot read property &apo ...

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

Aligning images in columns

I need help aligning a set of images using CSS. Currently, they are stacked top to bottom and I want them to be placed left to right instead. In simpler terms: 1|2|3|4 5|6|7|8 vs 1|3|5|7 2|4|6|8 #photos { line-height: 0; -webkit-column-count: ...

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS r ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

Meta tags are causing issues with HTML5 validation on the website

Striving to enhance the HTML validity of my website, I encountered several errors in the meta tags that are marked as invalid. Unfortunately, I am unsure how to modify them to rectify these errors. <meta http-equiv="X-UA-Compatible" content="IE=edge,ch ...

What sets apart compressing test.min.css from compressing test.css?

Recently, I have transitioned to a new job role with a different employer. In my previous workplace, we utilized LESS and compiled it into a .css file before compressing it further into a .min.css file. However, in my current position, we also work with L ...

Adjust the alignment of items in the NavBar using BootStrap to ensure they

I'm having trouble centering the contents of my Nav Bar, and for some reason, everything seems to be left-aligned instead of centered. I haven't used float: left anywhere, so I'm not sure why it's not working as expected. The goal is ...

What is the best way to align my cards side by side using html/css/js?

Check out this piece of HTML code I have: <div class="container"> <div class="column"> <div class="post-module"> <!-- Inserting content here --> </div> <div class="post ...

Creating impenetrable div elements with JavaScript or jQuery

I'm currently working on creating solid blocks using DIVs positioned side by side both horizontally and vertically. I've successfully achieved this when the divs have equal heights. However, an issue arises when a div has larger dimensions; it en ...

Adding specific tag attributes to user input in PHP

When accepting user input for a post, I want to allow users to include <a href=""></a> tags. However, I need to insert a class like <a class="user" href=""></a> if any <a> tag is included in the post before saving it to the da ...

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

After setting an integer value to a localStorage item: localStorage.setItem('a', 1) and checking its data type: typeof(localStorage.a) "string" it shows as a string. I then typecast it to an int for my purposes: parseInt(localStorage.a) My ...

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

I'm looking to create a form with radio boxes that resemble checkboxes and display a glyphicon x when selected. I've experimented with various solutions such as: input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, ...

How to temporarily disable CSS hover effects

I have a menu with some links <ul id="nav"> <li> <a href="#">Project</a> <div class="subs"> <div> <ul> <li> <h3>Save</h3> <ul> <li> <a i ...

Tips for customization: Altering HTML table borders and column widths

I am looking to update the appearance of an HTML table. Currently, it looks like this: https://i.sstatic.net/pueyW.png Here is the code snippet: <div className="student-schedule"> <table className="student-calendar-table" ...

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

Full-Width Bootstrap Sticky Containerized

I am trying to create a sticky sidebar that fills the full width of the container in Bootstrap 4. I have written the code below, and while the sticky functionality works perfectly, the sidebar does not span the full width of the container. Can someone pl ...

Bootstrap 4's img-fluid class ensures images stretch to fit mobile resolutions

I have a challenge with making an image responsive to 100% width while still maintaining responsiveness overall. When I try using: <div class="container-fluid"> <div class="row"> <img src="images/centre-mob.jpg" alt="" class="i ...

Modifying the header on an HTML page

Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...