Unable to stack DIVs in a vertical arrangement

I'm having trouble replicating the 2:1 layout shown in the image below. The issue I'm facing is with aligning the two photos on the right vertically so they match perfectly with the photo on the left. I attempted using flex but the vertical distribution isn't working as expected and I need the layout to be responsive.

See Current Layout

Desired Layout Example

img-row {
    display: flex;
    flex-wrap: wrap;
}

.gridImage1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-photos-div {
    justify-content:space-around;
}

.gridImage23 {
    width:100%;
    height:100%;
    object-fit:cover;
    justify-content: space-around;
}
 <div class="container-fluid row img-row">
                
                    <div class="col-12 col-md-6">
                        <h5 class="grid-image1-title position-absolute"><b>GINA Smart | The new standard in filter coffee</b></h5>
                        <h5 class="grid-image1-price position-absolute">220€</h5>
                        <img src="Images/goat-story-gina-specialty-coffee-preparation-66_3_2x_cb3f02c4-e13e-4945-b38f-513e42091a4e.jpeg" class="gridImage1" alt="Gina">
                    </div>
                    <div class="col-12 col-md-6 right-photos-div">
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>COLD BREW KIT | Cold brew made easy</b></h5>
                            <h5 class="grid-image2-price position-absolute">22€</h5>
                            <img src="Images/20190902-A7R01337_2x_120dba37-6706-456a-89f5-fdfe1c56edef.jpeg" alt="" class="gridImage23">
                        </div>
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>GOAT MUG | Unique coffee cup on the go</b></h5>
                            <h5 class="grid-image2-price position-absolute">29,5€</h5>
                            <img src="Images/goat_mug_hemp_3_2x_dd7d99a2-21cd-4730-a623-786b47beab02.jpeg" alt="" class="gridImage23">
                        </div>
                    

                </div>

            </div>

htmlcssbootstrap-4layoutflexbox

Answer №1

I was able to achieve the desired outcome by using the code below:

    .grid-test{
        display:grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 50vh;
    }

    img{
        width: 100%;
        object-fit: cover;
    }

    .left-side-image{
        height: 100%;
    }

    .right-grid-container{
        gap: 30px;
        display: flex;
        flex-wrap: wrap;
        padding-left: 30px;
    }
<div class="grid-test">
    <div>
        <img class="left-side-image" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
    <div class="right-grid-container">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
</div>

Based on the changes I made, you can achieve the same effect simply by adding these styles to your right-photos-div element:

    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;

Keep in mind that by converting the element into a flex container with flex-wrap, you can create spacing between items and include a left padding (padding-left) equal to the gap for consistent spacing.

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 matter at hand pertains to the aesthetics of formatting HTML components

Below is my attempt at creating a search box and styling it. However, I am encountering an issue where the CSS properties applied to the box are not being rendered. I have tried including the CSS in a separate file as well as within the script itself, but ...

phphtmlcss

Unlocking broken Input Options in Select Events with jQuery

How can I enable the first input when option one is selected using jQuery? Below is a code snippet for reference: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-material" ...

javascriptjqueryhtmlinputonchange

What results can be expected from assessing the statements provided in the following code block? {javascript}

Hello everyone, I'm currently in the early stages of learning about Javascript and programming in general. As I prepare for a test, I've come across a question that has me feeling stuck. I need help evaluating the following statements to ...

javascripthtmldom

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml

Issues with page loading arise when trying to integrate HTML binding in an Angular 6 project

The code below uses Angular 6 and Bootstrap 4, but it seems to have some issues: getNumberOfPossibleSteps() provides an array of integers: [1, 2, 3, 4] getDropDownElements() gives an array of selectable options for each step like this: ["- select an opt ...

htmlangularbootstrap-4

clicking on an element to get its div id

In my code snippet $('.startb').click(function() { var myId = $(this).attr("id"); });, I am already capturing the id "startb1". To also capture the id "test1" from the element with the class "flashObj", all within the same div container "audioCon ...

javascriptjqueryhtml

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

Offset the content from the border within a container that includes a scrollbar

The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...

cssscrollpadding

Is there a way to pass multiple PHP variables as parameters to a custom JavaScript function within an external module file?

Currently experimenting with three.js and WebGL. I'm attempting to pass references from the database to a custom JavaScript function in order to load a model, however I keep getting an alert message showing results as undefined. The JavaScript file is ...

javascriptphphtmlthree.jswebgl

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

javascriptjqueryhtmlcss

Problem with overlapping content and navigation side bar in Bootstrap 4

Working on a project for my university, I utilized Bootstrap-4 to create various divisions - header, content-top-fat, content-bot-fat, and main-content. I aimed to fix the positioning of the header, content sections, and footer while allowing only the main ...

csstwitter-bootstrapbootstrap-4

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

CSS - spacing anomaly among inline-block items

I am facing a strange issue with the arrangement of elements in my container div. I have set them to display: inline-block, and they are supposed to expand horizontally if the contents exceed the device width. However, there is an unexpected margin between ...

csshtml

Pointer-enhanced Material UI Popup

Is there a way to implement a Popup that looks like the image provided using @Material-ui? https://material-ui.com/ I attempted to use Popover, however Popper does not include a pointer like in the image. https://i.stack.imgur.com/atz0G.png ...

cssreactjsmaterial-ui

Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review: ...

javascriptjqueryhtml

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

javascripthtmlcssbutton

retrieve the information stored in the rows of the table

Here is the arrangement, with numerous div class="extra" elements in my project. <div class="extra"> <table width="90%"> <colgroup> <col width="40%"/> <col width="30%"/> <col width="30% ...

javascriptjqueryhtml

Send form data using ajax technology

When testing my code on localhost, everything runs smoothly. However, when I tried running it on the server, it doesn't seem to be functioning properly. $("#MyUploadForm").ajaxSubmit(options); I would greatly appreciate any assistance with t ...

htmlajax

Is there a way to customize the color of the bar displaying my poll results?

My poll features two results bars that are currently both blue. I attempted to change the color of these bars but was unsuccessful. I've searched for solutions on stack overflow, specifically How can I change the color of a progress bar using javascr ...

javascriptphphtmljquerycss

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss