What is the best way to ensure that images in a grid layout take up 100% of the parent element?

I'm having trouble making sure the images inside the parent container fill 100% of the available space without leaving a gap below the last image. The photos have varying sizes and aspect ratios, so it's been challenging to achieve this.

My goal is to eliminate the red background by ensuring that the available space is completely filled with the images. Any suggestions on how I can accomplish this?

Here is what I am aiming for:

This is my current code:

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>

Appreciate any help or advice you can offer!

htmlcssgridcss-float

Answer №1

If you're experiencing gaps between images, simply add the following CSS rule to the parent container, .home-photos-grid; : font-size: 0;. This will make the white space disappear and create a seamless layout.

Creating a layout where images stretch to fill bottom gaps may require manual adjustments. Automated layout libraries like packery or masonry won't always know how to handle these situations.

One possible solution is using JavaScript to measure the gap's height, adjusting the div accordingly, and applying overflow hidden.

Alternatively, you can set a background image that covers the bottom area of the div, giving the illusion of filling the gap.

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
  font-size: 0;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>

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

A guide on embedding text onto the bottom of an image in Material-UI GridList using Reactjs

I'm currently developing a Mern-stack application and using Material-UI for the frontend. My GridList is functioning correctly, but I want to position my description text at the bottom of the image rather than in front of it. However, when I try to a ...

cssreactjsflexboxmaterial-uicodesandbox

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

Is the background color not being implemented?

I'm struggling with an issue - I can't seem to apply a background color to my top bar. I've tried multiple times but it's still not working. Could you please help me fix this error? https://i.sstatic.net/mzJIo.png Below is the code fo ...

htmlcssbootstrap-4

Issues with the CSS code causing the dropdown menu to malfunction

Having trouble getting my CSS to apply when creating a drop-down menu. I've set up UL and LI elements for the dropdown, but the styling is not rendering as expected. Check out the screenshot below for a look at how it currently appears using developer ...

htmlcssasp.net-mvc-5

Avoiding leaps through the use of dynamic pictures?

Currently, I am implementing the picture element along with srcset to download the same image but in varying resolutions depending on the screen size of the device. The image has a style of max-width: 100%, causing it to shift the content below when downl ...

javascripthtmlcss

How come the words are clear, but the background remains unseen?

My markup looks like this: <div class="one">Content</div> <div class="two"></div> I have the following CSS styles: .one, .two { height: 20px; } .one { background-color: #f00; } .two { background-color: #0f0; margi ...

css

How come the background image gets replaced by an extensive amount of text?

When using a text-field with a background-image style, the following CSS is applied: .leftPaneContent INPUT { background-color: #FFFFFF; background-image: url("../images/icon-search-large.png"); background-position: 4px 3px; background-rep ...

cssinternet-explorerbackground-image

When the AJAX function is called again, the previous loading process is interrupted, without the use of jQuery

I have created a function that loads a URL into an element, but it seems to be encountering issues when called repeatedly in a loop to load multiple elements. The current load operation stops prematurely: function loadDataFromURL(url, elementId) { var ...

javascriptajaxhtmlload

The mysterious case of disappearing Bootstrap 4 modals with data-target

I am retrieving a Json object from a local API, and everything is functioning properly. I use this object to populate a table with rows and columns, and each column contains a search button. When this button is clicked, it should open a modal displaying mo ...

htmlbootstrap-4

Safeguard your HTML, PHP, and image files from being monitored

What methods can be used to safeguard your files, such as PHP and image files, from being tracked by tools like TeleportPRO and HTTrack? Your time is greatly appreciated. Thank you! ...

phphtmlimage

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

javascripthtmlreactjsreact-hooksfrontend

The Bootstrap 4 navigation bar item unexpectedly jumps below and then wraps around

I am working on creating a navbar using the latest version of Bootstrap 4 (alpha6). <nav role="navigation" class="navbar navbar-light bg-faded"> <a class="navbar-brand" href="/"> <img src="/public/img/logo.png" height="36" alt="myLogo"&g ...

cssbootstrap-4

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

What is the best way to align an inline list in the center so that it is responsive across all

Here is the CSS code provided: .wrapper{ display: inline; line-height: 2em; width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; text-align: center; } ul{ list-style: none; } li{ list-style: none; } .craftb ...

htmlcss

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

javascriptjquerycssjquery-pluginsjquery-ui-sortable

integrating a CSS file into a Vue project

As a newcomer to Vue, I encountered some difficulties understanding how things function in Vue. One of the obstacles I faced was integrating my own custom CSS file into a project. I attempted to create a file called style.css within the src folder and add ...

cssvue.jsimportincludestyles

Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes: Name: Text starting here - unique style #1 text that moves to a new line with a different look - unique style #2 more text continuing on another new line ...

htmlcssflexbox

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

javascripthtmljson

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

htmlcss

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly. For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load. The paragraphs slide s ...

javascripthtmljquerycss