Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it.

Is there a way to prevent block overlapping using CSS? I have searched Stack Overflow for similar code examples or issues, but couldn't find any.

.gallery-grid {
            margin: 0 auto;
            padding: 30px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
        }
        .gallery-grid .image-responsive {
            width: 100%;
        }
        .gallery-grid .cell {
            margin: 10px 10px;
            width: 110px;
            height: 110px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        .gallery-grid .cell.big {
            flex: 0 240px;
        }
<div class="gallery-grid">
            <div class="row"></div>
            <div class="cell ">
                <img src="http://placehold.it/110x110" class="image-responsive">
            </div>
            <div class="cell ">
                <img src="http://placehold.it/110x110" class="image-responsive">
            </div>
            <div class="cell big">
                <img src="http://placehold.it/110x110" class="image-responsive">
            </div>
            <div class="cell">
                <img src="http://placehold.it/110x110" class="image-responsive">
            </div>
            ...more image tags...
        </div>

The two red marked blocks should not be overlapped. https://i.stack.imgur.com/5UJdx.png

cssuser-interfaceflexboxoverlapping

Answer №1

.gallery-grid {
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.gallery-grid .image-responsive {
  width: 100%;
}
.gallery-grid .cell {
  margin: 10px 10px;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.gallery-grid .cell.big {
  flex: 0 240px;
}
<div class="gallery-grid">
    <div class="row"></div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell big">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </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

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

Objective: Implement an iframe displaying a YouTube video with play/pause functionality for users. Issue: Unable to interact with main content, but works correctly when placed in Navigation or Footer components. Attempted Solutions: Explored various de ...

javascripthtmlcssreactjs

Differentiating onClick events for parent and child elements

I need help with my JSX code: <div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}> <div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} /> </div> When I click on the pare ...

javascripthtmlcssreactjsdom

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

javascriptjqueryhtmlcss

Including CSS in an HTML file does not function properly

I've been attempting to import a CSS file into an HTML document, but for some reason it's not working. I have also tried linking the path directly, but that hasn't worked either. <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcssimportstyles

Using Sass to Loop through Specific Items

Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...

cssfor-loopsass

Bourbon encountering difficulty with font-face mixin in Rails version 3.2.2

After watching Ryan Bates' screencast on Bourbon, my application.css.scss file looks like this: @import "bourbon"; @import "main"; @import "events"; ..etc. In my main.css.scss stylesheet, I am able to use the @include transition() mixin without any ...

cssruby-on-railssassbourbon

Testing the screen size automatically using Javascript

Hello everyone, I've implemented a JavaScript code that triggers an image to slowly appear and darken the background when a link is clicked. However, on an iPad, the background doesn't completely turn black as intended. The CSS specifies that the ...

javascriptcssipadhtml

There is a vast expanse separating the header of the page and the navigation bar

Hello! I'm trying to figure out why there is a huge space between the top of the page and the navbar on this site: . I've included the CSS and HTML below. Any help would be greatly appreciated, thank you! HTML: <!DOCTYPE html> <html> ...

htmlcss

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss

Creating React components with scoped CSS imports

I am facing an issue with my component's CSS structure and import method. About/style.css .AboutContainer { # Some style } p > code { # Some style } When importing the CSS in the component: About/index.js import './style.css&apos ...

cssreactjs

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

javascripthtmlcss

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

The transitioning period caused the gooey effect to become distorted

I'm currently working on creating a radio button with a gooey effect. The transition looks great, but once it's complete, the colors don't blend well and the edges glow in an odd way. I've been searching for the root of the issue, but ...

jquerycsssvg-filters

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend

Twitter-Bootstrap: implementing text underlines for thumbnail captions

While experimenting with Bootstrap, I aimed to create a layout similar to ; a grid featuring bordered panels containing text and images. After some research, I concluded that Bootstrap's Thumbnail component would be the most suitable choice for my pro ...

htmlcsstwitter-bootstrap

However, when it comes to the jQuery dropdown menu, the submenus open inwards rather than extending

I recently developed a jQuery menu that includes dropdowns. However, I encountered an issue where the subMenu items do not open to the left when hovered over. Despite my attempts to adjust the position using CSS properties such as absolute or relative posi ...

jquerycssmenuhover

Issue with sticky positioning not functioning properly with overlapping scrolling effect

When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...

htmlcss

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage