Struggling to create a photo grid design that meets my expectations

I'm struggling to recreate this particular photo grid. Any tips on how I can achieve it? Check out the image here

Just to clarify, I had a working prototype see image description using flexbox. However, one image didn't fit well so I resorted to absolute positioning, which doesn't translate well on different screen sizes.

Here's the code snippet:

.container-ed {
  padding: 0px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}

.pic-ed {
  position: relative;
}

.pic-ar {
  position: absolute;
  right: 40px;
  margin-top: 280px;
}

.pic-ad {
  margin-top: 10px;
}
<div class="container-ed">
      <img class="pic-ed" src="img/pic.svg" height="550" width="600">
     <!-- <img class="x-ed" src="img/ex-ed.svg"> -->
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ar" src="img/Rectangle%20136.svg" height="250" width="300">

    </div>

htmlimagecssgridflexbox

Answer №1

Is this the solution you've been seeking?

.photo-grid {
    width: 400px;
    height: 400px;
}
.grid {
    display: inline-block;
    vertical-align: top;
    float: left;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #aaa;
    background-color: #eee;
}
.grid:before {
    content: attr(data-label);
    position: absolute;
    top: 3px;
    left: 3px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0px 0px 1px #000;
    font-size: 2rem;
    font-family: sans-serif;
}
.grid.small {
    width: 33.3%;
    height: 33.3%;
}
.grid.medium {
    width: 66.6%;
    height: 66.6%;
}
.grid.right {
    float: right;
}
<div class="photo-grid">
    <div class="grid medium" data-label="1"></div>
    <div class="grid small" data-label="2"></div>
    <div class="grid small" data-label="3"></div>
    <div class="grid small right" data-label="4"></div>
    <div class="grid small right" data-label="5"></div>
    <div class="grid small right" data-label="6"></div>
</div>

Answer №2

When it comes to responsiveness, I suggest dividing the images into two separate div elements - one for the top 3 pictures and another for the bottom 3. You can adjust the size of the first image to make it larger compared to the rest and align them by floating them left.

Answer №3

An effective approach could be incorporating Twitter Bootstrap and applying various heights to the containers. For guidance on utilizing this technique, you can refer to a helpful tutorial provided by W3Schools: https://www.w3schools.com/bootstrap/

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

The Angular integration with Semantic UI dropdown does not display the selected value clearly

I have put together a small example to demonstrate the issue. http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF Essentially, the HTML structure is as follows: <div data-ng-app="app" data-ng-controller="main"> <select class="ui dropdown" id="ddlStat ...

javascripthtmlangularjssemantic-uidropdown

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

htmlcss

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

htmlcssgoogle-chromefirefox

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

javascriptphpjqueryhtmlcss

Seeking help with h2 headings, nested hyperlinks, and clickable images

Attempting to tackle a homework question today. This is the task at hand.... List a variety of foods in the following categories: Sandwiches, Drinks, Desserts. Use h2 tags to create these categories. Under each category, create a nested list that inc ...

htmlcsshyperlink

The resizing of images is limited to when the browser is refreshed for responsive

Hey there, I'm currently facing an issue with a responsive image gallery using jQuery cycle. If you want to check out my fiddle, here's the link - https://jsfiddle.net/qxyodctm/5/ <html>See jsfiddle</html> The problem occurs when t ...

jquerycsstwitter-bootstrapjquery-cycleresponsive-images

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs

What is the optimal order for arranging CSS properties?

Do CSS properties need to be in a specific order? I've always organized them based on my own preference. Is there an official standard for arranging CSS properties? While server-side languages have set standards, it seems like CSS structure is more f ...

cssstandards

Incorporate gulp-clean-css into the current gulpfile.js

I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...

cssnode.jswordpressnpmgulp-clean-css

Is there a method in AngularJS to submit form data when the input fields are pre-populated using a GET request?

How do I submit form data in AngularJS? I have a div that populates the input field from a GET request. Now, I want to send this data using a POST method. How can I achieve this? Below is the form div: <div class="row" ng-app="myApp" ng-controller="myC ...

javascriptjqueryhtmlangularjs

Javascript Dilemma: Unable to Access 'object.style.left' and 'object.style.top' Values - What's the Issue?

Why am I unable to access and modify the object.style.left & object.style.top values? I am currently attempting to dynamically reposition a button on a webpage. In order to set new values for the style.left & style.top, I can utilize JavaScript l ...

javascripthtmlcss

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...

htmlcssimagealignment

Colab experiencing issue with exporting blank images using Matplotlib savefig

Hey there! Currently, I am utilizing Google Colab for image processing tasks. Once the processing is completed, followed by evaluations, my aim is to save the figure using matplotlib. Here's the script I've written: def get_images(): list_o ...

pythonimagematplotlibiogoogle-colaboratory

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

htmlcssreactjsmobiletailwind-css

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

htmlcss

Ways to extract information from PayFast

One issue I'm facing with my online store is that although PayFast does call my notify_url, it appears that no data is being posted. Below are the codes I've been using: Code for purchasing: <button id="cCart" type="submit" class="bt ...

javascriptphphtml

What steps can I take to ensure that a user only clicks on my voting link once for a specific post?

I am managing a MySQL database with two tables. One table is named 'users' with the column 'uname' as the primary key, which stores usernames as strings. The second table is named 'posts' with the column 'id' as the ...

phphtmlmysql

Height of border not being displayed accurately

I have been searching for a solution to my unique issue with inserting borders in HTML and CSS. When I try to add a border to three images, the height does not display correctly. This is all part of my learning process to improve my skills in coding. Belo ...

htmlcss

Creating a border with a unique and specific image

Is there a way to use an image as the border for my div elements? The key requirement is that the border must be positioned outside the box without affecting its size. It's important to note that all div items have the same width, but varying heights ...

htmlcssborderborder-image