Creating nested squares using flexbox

I've been working on replicating this layout using flexbox: https://i.sstatic.net/Fmuk2.jpg

While I've made progress with the layout, I'm encountering some strange flex-wrap behavior like this:

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

Here's the CSS I'm using:

.parent {
    display: flex;
    justify-content: space-between;
    .square-container {
      width: calc(33% - 1.333px);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    &:before {
      content:'';
      float:left;
      padding-top:100%;
      }

      .small-square {
          width: calc(50% - 2px);
          height: calc(50% - 2px);
          background: red;
          flex-shrink: 0;
      }     
    }
}

This is the corresponding HTML:

<div class="parent">
  <div class="square-container">
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
  </div>
  <div class="square-container">
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
  </div>
  <div class="large-square"></div>
</div>

I believe there might be a crucial flexbox property that I'm overlooking. Any guidance you can provide would be greatly appreciated!

Answer №1

If you want to achieve this layout, follow these steps:

.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 210px;
  justify-content: space-between;
  width: 650px;
}

.small {
  width: 100px;
  height: 100px;
  background: red;
}

.large {
  width: 210px;
  height: 210px;
  background: red;
}
<div class="flex">
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="large"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

Latest Update

To make it fully responsive with the current HTML structure, use the following CSS:

.parent {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.parent:after {
  content: '';
  display: block;
  width: 0;
  background: blue;
  padding-top: 33.3333%;
}

.square-container {
  width: calc(33.33333% - 5px);
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.small-square {
  width: calc(50% - 5px);
  height: calc(50% - 10px);
  background: red;
}

.large-square {
  margin: 0 10px 10px 10px;
  flex-grow: 1;
  width: 33.33333%;
  background: red;
  order: 2;
}

.square-container:first-child {
  order: 1;
}

.square-container:nth-child(2n) {
  order: 3;
}
<div class="parent">
  <div class="square-container">
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
  </div>
  <div class="square-container">
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
    <div class="small-square"></div>
  </div>
  <div class="large-square"></div>
</div>

Answer №2

No modifications made to the HTML structure:

.container {
  display: flex;
}

.box-container {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}

small-box {
  flex: 0 0 45%;
  height: 100px;
  background-color: red;
}

big-box {
  flex: 1;
  height: 210px;
  margin: 0 5px;
  background-color: red;
}

.box-container:nth-child(2) {
  order: 1;
}
<div class="container">
  <div class="box-container">
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
  </div>
  <div class="box-container">
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
  </div>
  <div class="big-box"></div>
</div>

Link to jsFiddle

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

Creating a Bootstrap dropdown button that responds to different screen sizes

I have implemented the following Bootstrap code for a drop-down button. The dropdown functionality works fine, but it is not responsive on mobile devices. Can someone help me with making it responsive? <div class=" col-sm-4 col-xs-6"> <div ...

"Get rid of the arrow in Bootstrap's dropdown menu

I'm currently using a bootstrap template that features an accordion menu. However, I have come across a scenario on one section of the page where I do not require the items to expand and show additional text, therefore, I would like to remove the arro ...

Differences between JavaScript's window.onload and body.onload functionsWhen

My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...

Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu. Check out my JSFiddle This is the CSS code: .menu_main { float: left; width: 60%; } #access .menu { list-style: none; font-weight: normal ...

Gradually Generated HTML website

Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error ...

Create a new row in the table using in-line creation capabilities

After developing a basic MVC 5 application, I followed these steps: Create model (using code first) with 4 properties In the controller, generate view by scaffold. Everything seems to be functioning correctly! However, when I click on the create ...

What are some alternative ways to position-style anchor elements without using absolute positioning or a wrapping div?

Here is the HTML code snippet that I am working with: <div class="top"> <div class="header title">Some Big Header Goes Here</div> <div class="sub-header title">The fancyness enters here.</div> <a hr ...

Tips for tailoring content based on screen size

I am looking for a way to display different content depending on whether the user is viewing my website on a large screen (PC/tablet) or a small screen (mobile). While my site is responsive and uses bootstrap, I have a lot of content that is only suitable ...

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. https://i.sstatic.net/fSRIT.png I attempted to adjust the code for proper alignment before publishing, but was ...

Adding a sub-menu to a dropdown menu in your Blogger website can enhance navigation and improve

Having some trouble adding a "sub menu" to my drop down menu. I have limited knowledge of CSS and can't seem to figure it out. My goal is to make the sub-menu open to the right side when the cursor is placed on it. Below is the related CSS and HTML co ...

"Creating a responsive design: Setting the width of a :before pseudo element based on the size of

I am looking to encircle specific words with an image circle. <p> <span class="Subjekt">Father</span> <span class="Predicate">brings</span> </p> using .Subject:before { position: absolute; background-ima ...

assisting with the transition effect using CSS3, JS, or jQuery

I am looking to alter the background-image of this particular image when transitioning to another one from my images folder, similar to this example. Below is the code that I have: CSS .image { position: relative; overflow: hidden; -webkit-tr ...

Issues with Tab Pane Widths in Bootstrap 4

My project features tabbed content with three tabs, but I'm encountering an issue where each tab pane loses width. The first tab pane is 1140px (the full width of the container), but subsequently, each pane loses 100-200px consecutively. For example: ...

Creating a layout resembling a table using CSS and HTML without actually using the <table> element

Despite searching on various platforms, I have not found a satisfactory solution to my issue. To demonstrate the problem with using a table, I have attached a screenshot: The bottom two rows are structured as tr and td within a table. Though the alignmen ...

Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen. Here is ...

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...

Embedding a table row within an anchor element in Angular 4

Currently, I am facing an issue with a table that contains [routerLink] on each <tr>. This setup is preventing the "open link in a new tab" option from appearing when I right-click because there is no <a> tag. I attempted to enclose the table r ...

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Currently, I am working on developing a shopping cart website and I am new to using Jquery. My layout involves the need to increment and decrement values by one when the plus and minus button is pressed. Additionally, the total price value should also be a ...

Steps to reveal a concealed div when a button is pressed and hide the button in Angular 2

Having trouble with Angular UI development, particularly with the following requirement: When the Add Button is clicked, a hidden form should be displayed. Clicking the Add Button should also hide it. The hidden form includes a Cancel button. If Cancel i ...

Is there a way to apply dual linear-gradients to both the left and right borders simultaneously?

I want to design a yellow div with wide left and right borders that gradually fade to white towards the edges to create a transparent effect. Although I have successfully created the div, I am struggling to achieve the desired gradient: .fade { margi ...