Implementing a hybrid design using the display flex property

Question

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section.

Should I consider using multiple rows for this task?

.row {
  display: flex;
  flex-wrap: wrap-reverse;
}

.col {display:1;width:30%;background:red;}

.col:nth-of-type(3) {background:blue;}

<div class="row">
  <div class="col">
  test
  </div>
  <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
</div>

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

html css flexbox css-grid

Answer 1

Answer №1

Here is a solution that utilizes the CSS grid layout:

To set up the layout, specify the row as the grid container with display: grid.
Create a 3-column layout by using
```
grid-template-columns: repeat(3, 1fr)
```
Create a 2-row layout using
```
grid-template-rows: repeat(2, 1fr)
```
Extend the third column across all the rows with grid-row: span 2.
Adjust the spacing between the rows and columns with the grid-gap property.

View the demo below:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
  grid-gap: 10px; /* gap between the rows & columns */
}
.col {
  background: red;
}
.col:nth-of-type(3) {
  background: blue;
  grid-row: span 2; /* span all the rows */
}

<div class="row">
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
</div>

Answer 2

Here is a solution that utilizes the CSS grid layout:

To set up the layout, specify the row as the grid container with display: grid.
Create a 3-column layout by using
```
grid-template-columns: repeat(3, 1fr)
```
Create a 2-row layout using
```
grid-template-rows: repeat(2, 1fr)
```
Extend the third column across all the rows with grid-row: span 2.
Adjust the spacing between the rows and columns with the grid-gap property.

View the demo below:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
  grid-gap: 10px; /* gap between the rows & columns */
}
.col {
  background: red;
}
.col:nth-of-type(3) {
  background: blue;
  grid-row: span 2; /* span all the rows */
}

<div class="row">
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
</div>

Implementing a hybrid design using the display flex property

Answer №1

Similar questions

Dynamic image swapping using JSON key in Angular

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Revise the color of the selected image

Three fluid horizontal DIVs aligned side by side

Modify the useRef value prior to the HTML rendering (React functional component)

What could be causing my Bootstrap Carousel to malfunction?

Chrome compatibility issue with margin collapsing

Combining HTML with multiple .ts files in Angular

Upgrade from Vuetify 2 to Vuetify 3, new changes including the elimination of v-list-item-content and v-list

Anchor checkboxes

The text exceeds the maximum width of the table column

The Bootstrap 5 navigation bar remains fully expanded and does not collapse as intended

The CSS3 selector matching a value starting with "[attribute^=value]" does not match a value that has spaces after the quotation marks

Is it possible to utilize the AmMap API for developing an Android application?

Identifying and handling the removal of a complete div element by the user

Using JavaScript to show content in a textarea field

Enhancing your CircularProgressBar with dual variant colors using Material-UI

CSS Table columns are set to have a fixed width for the first and last columns, while the middle two columns have dynamic widths

How can I filter rows in HTML using Vue.js based on string options?

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function