Incorporating Masonry-inspired images into a website's design section

Question

Incorporating Masonry-inspired images into a website's design section

I have been working on incorporating a masonry layout of images into my website, but I am facing alignment issues. The images are simply stacking on top of each other instead of creating the desired masonry effect. Are there any tips on how to create a masonry section using CSS/HTML or perhaps styling a table to achieve the masonry layout?

Here is the HTML code I am using:

<div class="masonry">
   <div class="item">IMAGE GOES HERE</div>
   <div class="item">SECOND IMAGE </div>
   THIRD IMAGE
   <div class="item">FOURTH IMAGE</div>
</div>

And here is the CSS code I have implemented:

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Take a look at the image below to see the desired layout: https://i.sstatic.net/4MdG0.png

html css masonry

Answer 1

Answer №1

Here is the code snippet for creating a responsive image layout:

#container {
  height: 100%;
  width: 100%;
}
#left > img:nth-of-type(1) {
  height: 25vh;
  width: 35vw;
}
#left > img:nth-of-type(2) {
  height: 60vh;
  width: 35vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 25vw;
  height: 60vh;
}
#top-right > img:nth-of-type(2) {
  width: 35vw;
  height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
  width: 40vw;
  height: 25vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 20vw;
  height: 25vh;
}

<div id="container">
  <div id="left">
    <img src="Image 1">
    <br>
    <img src="Image 2">
  </div>
  <div id="right">
    <div id="top-right">
      <img src="Image 3">
      <img src="Image 4">
    </div>
    <div id="bottom-right">
      <img src="Image 5">
      <img src="Image 6">
    </div>
  </div>
</div>

Answer 2

Here is the code snippet for creating a responsive image layout:

#container {
  height: 100%;
  width: 100%;
}
#left > img:nth-of-type(1) {
  height: 25vh;
  width: 35vw;
}
#left > img:nth-of-type(2) {
  height: 60vh;
  width: 35vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 25vw;
  height: 60vh;
}
#top-right > img:nth-of-type(2) {
  width: 35vw;
  height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
  width: 40vw;
  height: 25vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 20vw;
  height: 25vh;
}

<div id="container">
  <div id="left">
    <img src="Image 1">
    <br>
    <img src="Image 2">
  </div>
  <div id="right">
    <div id="top-right">
      <img src="Image 3">
      <img src="Image 4">
    </div>
    <div id="bottom-right">
      <img src="Image 5">
      <img src="Image 6">
    </div>
  </div>
</div>

Incorporating Masonry-inspired images into a website's design section

Answer №1

Similar questions

The CSS isn't loading properly once the file is uploaded to the server using FileZilla or cPanel

Tips for customizing MUI PaperProps using styled components

Having trouble uploading multiple input files in a Flask and HTML form

Why isn't the right-clear property functioning correctly?

Invisibility Problem

What could be causing this excessive lag?

error occurred while trying to upload a file

Disable browser autocomplete for Material-UI TextField

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

Determine the total number of days using the bootstrap date range picker

Leveraging summernote in meteor with Discover Meteor tutorial

jquery executes a function on each element that is discovered using the .find method

What sets apart adding a row from adding a col-12 in Bootstrap 4?

Incorporate a progress bar and delete functionality for uploading files in PHP

Incorporating Google's Invisible Recaptcha with Jquery Ajax and PHP

What is the purpose of utilizing jQuery for retrieving CSS resources?

Is it possible to rearrange the order of rows and columns based on the viewport size?

No matter what I try, the design of my dialog box remains stubbornly unchanged

Issue with the visibility of nested dropdown list on the website

Using jQuery, is there a way to move an element from one div to another, but only if the destination div is currently empty