Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

For my Wordpress theme, I am utilizing Bootstrap 4.2 to design a basic grid layout for a list of blog posts.

In my design, I have a Card that is double the height of others and I am attempting to 'float' two single-height cards beside it.

Previously, I would use floats for this layout, but with flexbox, I am struggling to find a solution to stack two divs on the right of a larger div.

A key requirement is for the boxes to maintain a responsive display at a 4:3 aspect ratio, ruling out fixed height options.

I have scoured many resources for a solution using flex without specifying a fixed height, but so far, no luck.

Below is a visual representation of what I am trying to achieve (left) versus what is currently displaying (right):

csslayoutflexboxbootstrap-4

Answer №1

You can create a stylish layout using CSS grid :

.grid_container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(7, 1fr);
        
        /* Customize the size of the container */
        width: 350px;
        height: 450px; 
    }

    .grid_item{
        border: solid 1px blue;
        margin: 10px;
        
        /* Align text within the box : */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grid_item:first-child{
        grid-column:1/5;
        grid-row:1/3;
    }

    .grid_item:nth-child(6){
        grid-column:1/4;
        grid-row:5/7;
    }

    .grid_item:nth-child(10){
        grid-column:2/4;
    }
<div class="grid_container">
     <div class="grid_item">
         Top Item
     </div>
     <div class="grid_item">1</div>
     <div class="grid_item">2</div>
     <div class="grid_item">3</div>
     <div class="grid_item">4</div>
     <div class="grid_item">5</div>
     <div class="grid_item">6</div>
     <div class="grid_item">7</div>
     <div class="grid_item">8</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

Troubleshooting: PHP Integration Issue with HTML Document

I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...

phphtmlcssxampp

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

jquerycssangularjschart.js

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Here is the structure of my HTML (at the top): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s ...

javascriptjqueryhtmlcssmobile

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

cssreactjsmaterial-ui

Why is there an excessive amount of white space on my Reactjs page?

This webpage (page URL -) displays well without any white space between two images when viewed on a laptop. However, when accessed on a mobile device, it appears to be taking up too much space as shown in the image below. Image of webpage on laptop- lapto ...

cssreactjsmaterial-ui

How can you spot the conclusion of different lines that refuse to remain in place?

Currently, I am facing a jquery issue that has left me stumped. The website I am working on is structured as follows: <div class="Header"></div> <div class="main"><?php include('content.html'); ?></div> <div clas ...

javascriptphpjqueryhtmlcss

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

javascriptcssvue.jsvuejs2vuetify.js

What is causing the issue with the "Inline-block" property in this CSS code?

Please review the CSS code provided below for styling instructions. /*rex is the container of ex,ex2,ex3*/ div.rex{ height:200px; border:0px; margin:60px auto; padding: 0; vertical-align:top; } div.ex{ width:34%; height:200px; background-color:#4f443a; ...

htmlcss

What are the steps to create a responsive Coin Slider?

Once the slider is generated, it appears that there is no built-in method to resize it, causing issues with responsive design. Is there a way to adjust the size of the Coin Slider plugin based on the media queries in Twitter Bootstrap 3? Take a look at C ...

javascriptjquerycsstwitter-bootstrap-3responsive-design

What is the best way to create a sliding <nav> effect when a <div> is clicked?

Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the nav ...

javascriptjqueryhtmlcss

Displaying elements upon checkbox selection in React

Hello, I'm new to React and I am facing an issue with checkbox click handling in React. My goal is to display a div when a checkbox is checked and hide the div when the checkbox is unchecked. The current implementation only shows the div when the che ...

htmlcssreactjscheckbox

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open. I also want to prevent closing the currently ...

javascripthtmlcssvue.jsvuetify.js

Tips for personalizing PNG images within an SVG element

Looking to update the color of a PNG image within an SVG tag. The PNG images I have are transparent, and I want to customize their colors based on user selections. How can this be achieved? Is there anyone out there who can assist me? <HoodieSvg ...

cssreactjssvgpng

Clicking to center div elements

When clicking on my div elements, they transform into flipcards and expand to a size of 600px by 600px. I want these divs to be centered in the middle of the screen when clicked, and then move back to their original position when clicked again. I've b ...

javascriptjqueryhtmlcss

What is the best way to eliminate the gap above a block element using CSS?

Currently in the process of designing a website, I am faced with a challenging issue that seems to have me stumped. The structure of my page consists entirely of HTML DIVs, with certain elements nested within their parent DIVs. My main dilemma lies in tryi ...

htmlcss

What are your thoughts on nesting an "li" tag within an "a" tag?

Consider this scenario: <ul> <a href="http://google.com"><li id="someId"></li></a> ... ... ... </ul> This is a solution I came up with to work around my current css styling. Now, I'm debating whether or not to ref ...

htmlcsscoding-style

Determining the location of the hamburger item on the bar

As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would cent ...

htmlcsssass

Guide to horizontally aligning a div with a dynamic width in the center

After extensive research, I discovered that setting a width allows you to center a div using margin: 0 auto along with left: 0;, right: 0, and position: absolute. However, all the examples I found had a specified width. In my specific case, I need to cent ...

htmlcss