CSS techniques for arranging images with varying sizes into a tiled layout

I have a collection of images that I want to arrange in a tiled layout, similar to the one shown in this image. These images consist of 3 photos with identical width and height, except for one which is larger and should occupy double the space compared to the others.

I have managed to create a tiling effect, but the challenge is getting the next row to begin where the large image in the previous row ends.

(If my explanation is unclear, please refer to the illustration provided in this link.)

Below is the HTML code snippet:

        <div class="portfolio">
            <div class="row">
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="largeWidthImg"/>
            </div>
            <div class="row">
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
            </div>
        </div>

Additionally, here is the corresponding CSS markup:

.portfolio {
position: absolute;
width: 77.1%;
top: 165%;;
left: 50%;
transform: translate(-50%, 0);}

.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}

.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}

.smallWidthImg:first-child {
padding-left: 0;}

.smallWidthImg:last-child {
padding-right: 0;}

.largeWidthImg {
float: left;
width: 30.64%;
padding: 0 0.85% 0.85% 0.85%;}

.largeWidthImg:first-child {
padding-left: 0;}

.largeWidthImg:last-child {
padding-right: 0;}

My question is whether achieving this layout is feasible using only CSS?
As I am not proficient in JavaScript, I am unable to explore that avenue for a solution.

Any guidance or assistance on this matter would be greatly appreciated.

Answer №1

Have you considered using columns in your design?

<div class="portfolio">
    <div class="row">
        <div class="col">
            <div class="row">
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
            </div>
            <div class="row">
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
            </div>
            <img src="./nodejs.png" alt="" class="largeWidthImg"/>
        </div>
    </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

Looking for assistance with PHP if statement and troubleshooting iFrame issues

Using the PHP if statement below on my website: <?php if(empty($_GET['tid'])) echo '<iframe src="http://tracking.mydomain.com/aff_goal?a=33&goal_id=47" scrolling="no" frameborder="0" width="1" height="1"></iframe>'; ...

Utilizing jQuery for easy drag-and-drop functionality in web development

I have two lists which are currently using jQuery for functionality. An example can be found here. I need the same basic functionality but with some modifications: Instead of just getting all sortable items by clicking "Get items," I want to be able to dr ...

Display Button and Div when Event occurs in Asp.net core using Razor Pages

I am currently working on a project that involves two dropdown menus: one for Categories and the other for SubCategories. Within a partial view named _CreateProject, I have set up an html form to facilitate the creation of new projects. My goal is to have ...

Creating a dynamic background color that pulses with animation

I recently created a script to animate the menu li element when hovering over the corresponding a element. Everything is functioning as expected, but now I'm looking to enhance the effect by having it continue as long as the mouse remains over the a e ...

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

Instructions for creating a distinct click listener for each <img> element inside a table cell

Within my table, each row contains multiple columns with images as data. I successfully implemented a 'common listener' that is triggered when any image within a table row is clicked. $('#mytable tbody td img').click(function () { // ...

Having trouble with your jQuery code not loading properly?

Currently working on debugging jQuery code and facing an issue where a particular section of the code is not being triggered upon clicking. The HTML/PHP in question: $cartlink .= "<a class='add_to_cart button' data-id='{$product->id} ...

What could be causing the Custom CSS file to stop functioning properly?

Currently, I am in the process of developing an eCommerce website utilizing PHP, Bootstrap, and JQuery. In order to structure the header file for this project, I have followed the following format: <!DOCTYPE html> <html> <head> ...

What is the best method for sending data from an HTML page to a Django view in order to utilize it

I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

Adjusting my menu layout causes my header image to be partially covered

I've been trying to make my menu fixed at the top of my website, but it keeps overlapping into my header image and doesn't look right. I've experimented with different solutions, but nothing seems to work. Here's the CSS code I used th ...

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...

When items are set to full width, material ui grid alignItems flex-start only affects the first row

I'm currently working with the material ui grid system, and I have a specific requirement. I need to create a grid container with a fixed height of 200px that accommodates full-width items. The challenge here is that I want the items to fill the conta ...

Tips for inserting HTML content into a Flex TextArea

There was once a panel where I had added a fadeIn show effect. Initially, the effect only applied to the panel itself, with text appearing without the desired fadeIn effect. Fortunately, a colleague suggested embedding the fonts, which miraculously solved ...

What is the best way to sort a table by column index using HTML?

I find myself in a situation where I am not well-versed in HTML, Javascript, and CSS. Here is the scenario: <div class="table"> <table class="display-table"> <thead> <tr> ...

What are some alternatives to using iframes?

Currently, I am working on a project for a client where I need to display multiple websites on a single page in a browser. To achieve this, I initially used the iframe element, but encountered an issue with the openerp frame. Despite setting up the openerp ...

Using Jquery to toggle the visibility of divs based on radio button selections

I am struggling to hide the divs with the radio buttons until their title is clicked on. However, I am facing issues as they are not showing up when their title is clicked on. Any assistance would be greatly appreciated. SPIKE <!DOCTYPE html> &l ...