Achieving a layout of three columns and two rows (1 x 2 x 2) using flexbox

I am looking to achieve a specific layout using Flexbox. While I am comfortable with CSS, I want to challenge myself by learning how to implement this design using Flexbox for more concise and maintainable code.

https://i.stack.imgur.com/QDVfT.png

.banner {
  width: 20%;
  height: 100%;
  position: relative;
  float: left;
  overflow: hidden;
}

.item {
  height: 50%;
  width: 33.33%;
  float: left;
  position: relative;
}

.inner-item-block {
  height: 100%;
  width: 80%;
  float: left;
  position: relative;
}

.inner-line {
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center; /* center child elements */
}
<div class="item-block">
  <div class="banner banner3">
  </div>
  <div class="inner-item-block">
    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

If the parent element has a fixed height, you can achieve this layout using Flexbox. Set flex-direction: column and flex-wrap: wrap, then make the first child element take up 100% of the height.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-wrap: wrap;
}
.parent > div {
  flex: 0 0 50%;
  width: 33.33%;
  border: 1px solid black;
}
div.first {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="parent">
  <div class="first">First</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

An alternative way to create this layout is by using Grid-layout. Simply set grid-row: span 2 on the first child element.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.parent > div {
  border: 1px solid black;
}
div.first {
  grid-row: span 2;
}
<div class="parent">
  <div class="first">First</div><div></div><div></div><div></div><div></div>
  <div class="first">First</div><div></div><div></div><div></div><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

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

Various Plus/Minus Containers

One issue I am facing is that when using multiple counters on the same page, my - and + buttons to decrease or increase the number in a text box do not function properly. The script provided below works for one counter. How can I modify this code so that ...

javascriptjqueryhtml

Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...

htmlcssbootstrap-5

What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below: let rotation = ...

cssanimationsvgrotationcss-transforms

What could be preventing me from setting a boolean variable within an Observable?

After retrieving data from the Service, I am attempting to hide a specific div element. Below is the HTML code: <progressbar *ngIf="isLoadingBootStockData" [value]="100" type="default"> </progressba ...

angularhtmltypescriptobservableangular7

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

An effective approach to positioning HTML elements at specific X and Y coordinates

I have an innovative project idea! The concept is to enable users to create points by clicking on the display. They can then connect these points by clicking again. However, I am facing a challenge when it comes to creating HTML elements at the exact loc ...

javascripthtmltypescriptmouseevent

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

javascriptjqueryhtmlcssajax

Elevation on Tab button from the upper side

On my website, I have a large form where pressing the tab key switches between input fields. The inputs will also jump to the top if we reach the bottom of the form. The issue is that I have a fixed header at the top, covering the first 60px. Is there a w ...

jqueryhtmlcss

Maintaining uniformity in Python by assigning and populating empty values for any missing HTML tags to ensure consistency across structures

Here are the HTML lines I currently have: <nonDerivativeTable> <nonDerivativeHolding> # First Holding <securityTitle> <value>Common Stock</value> </securityTitle> <ownershipNat ...

pythonhtml

Tips on incorporating the $ symbol into a pseudo element

Can I add a price using a pseudo element? h3:after{ content: " (+ $75)"; } <h3>price</h3> The CSS minifier is preventing the display of "$75". How can I work around this issue? ...

htmlcss

Can a div section be defined and then filled with data in the same document?

Is it possible to initially declare a div section and later populate it with content in the same document? The following dummy code snippet illustrates the query... <div name="xyz" style="..."> <!-- Empty --> </div> < ... INTO "x ...

phphtml

Using column-count within a media query is not supported

I am encountering an issue with my CSS code that includes the column-count property within a media query, and for some unknown reason, it doesn't seem to be working! .masonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: ...

htmlcss

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

phpcssjoomlaframeworksposition

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

htmlcss

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

Discover the concealed_elem annotations through the power of JavaScript

As I work on my new website, I am struggling with narrowing down the web code. I came across a solution that seems fitting for what I need, but unfortunately, I can't seem to make it work: I attempted the non-jQuery solution, however, I must be missi ...

javascripthtmlgetelementsbyclassname