having difficulty with an intricate flexbox grid within another flexbox

I attempted to create a grid-like pattern using a negative margin based grid system (Susy) but was unsuccessful.

Next, I tried employing flexbox for the task. However, I'm unsure if it's achievable. My initial idea was to have 2 columns (side A and B) with boxes (1) having a flex height of 50% compared to boxes 2, but it doesn't appear to be working as intended.

This is the progress I've made so far:

https://i.sstatic.net/D3jVH.png

.block {
width: 100%;
background: grey
}

.column {
    align-content: stretch;
    display: flex;
    flex-flow: column wrap;
    width: 50%;
}

.box_long {
background-color: pink;
flex: 0 0 50%;
padding: 20px;
border: solid 1px black;
}

.box_small {
background-color: blue;
flex: 0 0 25%;
padding: 20px;
border: solid 1px black;
}

.box_big {
background-color: green;
flex: 0 0 100%;
padding: 20px;
border: solid 1px black;
}
<div class="block">

<div class="column">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>

<div class="column">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>

</div>
htmlcssflexboxsusy-sass

Answer №1

Consider using the following approach:

(No modifications needed to the HTML.)

.block {
  display: flex;
  height: 100vh;
  background: grey;
}

.column {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.box_big {
  flex-basis: 100%;
  height: 70%;
  background-color: chartreuse;
  border: solid 1px black;
}

.box_small {
  flex: 0 0 50%;
  height: 35%;
  background-color: aqua;
  border: solid 1px black;
}

.box_long {
  flex-basis: 100%;
  height: 30%;
  background-color: violet;
  border: solid 1px black;
}

* {
  margin: 0;
  box-sizing: border-box;
}
<div class="block">
  <div class="column">
    <div class="box_long"></div>
    <div class="box_big"></div>
  </div>
  <div class="column">
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_long"></div>
  </div>
</div>

Check out this jsFiddle for more details.

Answer №2

Does this match your criteria?

* {
  box-sizing: border-box
}

.container {
  background: grey;
  display: flex;
  height: 250px;
}

.column {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.column.col {
  flex-direction: column;
  flex-wrap: nowrap;
}

.column.col div {
  flex: 1;
  border: 1px solid black;
}

.column.row div {
  border: 1px solid black;
  flex-basis: 50%;
  height: 25%;
}

.column.row .box_long {
  height: 50%;
  flex-basis: 100%;
}

.box_long {
  background-color: pink;
}

.box_small {
  background-color: blue;
}

.box_big {
  background-color: green;
}
<div class="container">

  <div class="column col">
    <div class="box_long">
    </div>
    <div class="box_big">
    </div>
  </div>

  <div class="column row">
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_long">
    </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

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

javascripthtmlcss

Using the jQuery datetimepicker in the 12-hour format with AM and PM

Hey there! I'm looking to enhance my current code by adding a feature that displays time in a 12-hour format with AM/PM. You can check out an example of this functionality on jsfiddle by following this link: http://jsfiddle.net/8ztsjcos/3/. Thank you ...

jqueryhtmljquery-ui

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

phphtmlsession

Error found in the HTML tag data when viewing the page source for an issue

I am displaying some data from my express to ejs in HTML tag format. It appears correctly on the ejs template page and the web page. However, when I check the page source, the HTML tags are encoded and displayed as unescaped characters. Is there a solution ...

javascripthtmlnode.jsexpressejs

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

htmlcss

Exploring the Benefits of jQuery History Plugin, Optimizing with Google Sitemap and

Despite searching online, I have yet to find a precise solution to my query. On my index.php page, there are two specific DIV's: #post-title and #post-content, whose content is dynamically loaded through a jQuery function triggered by clicking a link ...

javascriptjqueryhtmlajaxseo

Leveraging HTML within jQuery UI autocomplete

In the past, I was able to include HTML in the JSON array I used for autocomplete with jQuery UI before version 1.8.4. For example: $row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; ...

htmljquery-uiautocompletejquery-ui-autocomplete

Selenium: Mastering the Art of Label Clicking

I'm attempting to interact with this element using Python's Selenium library by employing the following code snippet: driver.find_element_by_('publicForm_customFields').click() Unfortunately, I encountered the following error message: ...

pythonhtmlselenium

Challenge with the desktop sidebar in a responsive design

Disclaimer: Seeking input on how to address this issue kindly suggest another title for editing Situation I have a responsive design layout for mobile and desktop with different blocks: Mobile | block1 | | block2 | | clientInfos | | eq ...

htmlcss

Error: unexpected syntax error at the end of the for loop in PHP MySQL

I encountered a puzzling issue with the "endif" statement after properly implementing code I found on YouTube with MySQL. <?php <?php for($x = 1; $x <= $pages; $x++); ?> <a href="?pages=<?php echo $x; ?>&per-page=< ...

phphtmlmysqlcsscontent-management-system

Leveraging reframe.js to enhance the functionality of HTML5 video playback

I'm struggling with using the reframe.js plugin on a page that includes HTML5 embedded video. When I try to use my own video file from the same folder, it doesn't work as expected. While everything seems to be working in terms of the page loadin ...

javascriptjqueryhtml

The external embedded CSS seems to be missing from index.html after the Docker build process

My Vue/Webpack application includes an embedded CSS link in my index.html file that references an external source. Here is an example snippet: <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" con ...

htmlcssdockernpmwebpack

Unable to activate check box button by clicking on it

Hi there! I am having trouble with a checkbox button on my website. The button appears fine, but for some reason it's not working properly (it doesn't get unchecked when clicked). Can anyone help me fix this issue? I'm still learning HTML an ...

htmlcsstwitter-bootstrap-3

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

I am facing difficulty in establishing a connection between my front-end and back-end using node.js. As a result, the website only displays the HTML code without linking to the CSS or image files. Here is the folder structure: root -src •pi ...

javascripthtmlcssnode.jsexpress

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

javascriptphphtml

Rotating through elements in timed intervals

After exploring various examples of how to show/hide divs with a JavaScript timeout, I am still unable to resolve my specific issue. I currently have six divs that I want to cycle through sequentially every 10 seconds, starting with div #one. Although my ...

javascripthtmljquery

When a link is clicked, it quickly blinks or flashes on the screen

https://i.sstatic.net/cCFmX.gif <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <%= link_to 'FARDIN KHANJANI', root_path, class: 'navbar-brand logo' %> </div> Upon viewing the gif I include ...

htmlcsshyperlinktwitter-bootstrap-4bootstrap-4

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js

Prevent the movement of the first column in a table when rearranging rows up or down by utilizing

Feeling a bit stuck here, can't seem to figure out what I've missed. I've managed to move up or down a row in a table, but I need the value of the cell in the first column to remain unchanged. Here's my code: This is my HTML file: &l ...

javascripthtmlcssangularjs

The output is: [object of type HTMLSpanElement]

<form> <table> <tr> <td>Distance:</td> <td><input type="number" id="distance" onKeyUp="calculate();">m</td> </tr> <tr> <td>Time:</td> ...

javascripthtml