Looking to create a row-column-row layout using CSS flexbox techniques

Question

Looking to create a row-column-row layout using CSS flexbox techniques

`

I am trying to create a unique row-column-row layout using CSS flexbox. Below is the code snippet I have:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2%;
}

.box {
  color: white;
  background: royalblue;
  min-height: 100px;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

.b1 {
  flex: 1 0 80%;
}

.b2 {
  flex: 1 1 auto;
}

.b3 {
  flex: 1 0 100%;
}

<div class="container">
  <div class="box b1">1</div>
  <div class="box b2">2</div>
  <div class="box b3">3</div>
</div>

This design concept depicts what I am aiming for:

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

For mobile devices, I prefer a layout similar to this:

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

The issue lies in the fact that the column is not expanding vertically and I'm unable to utilize margins or gaps between the div elements as per the current code.

Kindly provide any suggestions. Alternatively, if you have CSS-Grid solutions, they are also welcomed.

html css

Answer 1

Answer №1

A responsive design solution utilizing grid layout:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "b1 b2"
    "b3 b2";
  gap: 0.2%;
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "b1"
      "b2"
      "b3";
  }
}

.box {
  color: white;
  background: royalblue;
  min-height: 100px;
  min-width: 100px;
  border: 1px solid;
}

.b1 {
  grid-area: b1;
}

.b2 {
  grid-area: b2;
}

.b3 {
  grid-area: b3;
}

<div class="container">
  <div class="box b1">1</div>
  <div class="box b2">2</div>
  <div class="box b3">3</div>
</div>

Answer 2

A responsive design solution utilizing grid layout:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "b1 b2"
    "b3 b2";
  gap: 0.2%;
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "b1"
      "b2"
      "b3";
  }
}

.box {
  color: white;
  background: royalblue;
  min-height: 100px;
  min-width: 100px;
  border: 1px solid;
}

.b1 {
  grid-area: b1;
}

.b2 {
  grid-area: b2;
}

.b3 {
  grid-area: b3;
}

<div class="container">
  <div class="box b1">1</div>
  <div class="box b2">2</div>
  <div class="box b3">3</div>
</div>

Looking to create a row-column-row layout using CSS flexbox techniques

Answer №1

Similar questions

Ways to make <li> elements display inline with React Bootstrap Rows and Columns

How to retrieve the width of an unspecified element using JavaScript

What are the best scenarios for employing Server Side Includes?

Tips for retrieving the user-input value from an HTML text field

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

How can a JavaScript function be used to check a tag's status?

Is it possible to eliminate the black bars from YouTube HQdefault image using only CSS?

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

Utilize Express Handlebars to render an input-generated list for display

Responsive Material-UI horizontal navigation bar

Do CSS Stylesheets load asynchronously?

The Tumblr HTML code is not valid: There is a stray start tag for `html

Removing the gaps within table cell contents

Font-face src with local() is incompatible with Android devices

Is there a simple and efficient method to transition the loading of a regular website to AJAX for the entire site?

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Is there a way to only refresh the div specifically for the calendar with an id of "

Angular implementation of a dynamic vertical full page slider similar to the one seen on www.tumblr

MailChimp consistently applies the "color: inherit !important" style to links, causing them to appear blue when viewed in Outlook

issue with border color staying the same when focusing