Is there a way to extend a div to occupy two rows?

Question

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task:

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

Here is my markup:

 <div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

Can this be achieved using grid, bootstrap, or flex without altering the order of elements?

html css twitter-bootstrap-3 flexbox grid

Answer 1

Answer №1

There are multiple ways to achieve this.

One approach is to utilize the grid method and then implement grid-template to address the issue at hand.

.container {
  display: grid;
  grid-template:
    "a b"
    "c b";
}

.a {
  grid-area: a;
  background: red;
}

.b {
  grid-area: b;
  background: blue;
}

.c {
  grid-area: c;
  background: green;
}

Alternatively, you can also employ the use of grid-area.

.container {
  display: grid;
}

.a {
  background: red;
}

.b {
  grid-area: 1 / 2 / 3;
  background: blue;
}

.c {
  background: green;
}

Answer 2

There are multiple ways to achieve this.

One approach is to utilize the grid method and then implement grid-template to address the issue at hand.

.container {
  display: grid;
  grid-template:
    "a b"
    "c b";
}

.a {
  grid-area: a;
  background: red;
}

.b {
  grid-area: b;
  background: blue;
}

.c {
  grid-area: c;
  background: green;
}

Alternatively, you can also employ the use of grid-area.

.container {
  display: grid;
}

.a {
  background: red;
}

.b {
  grid-area: 1 / 2 / 3;
  background: blue;
}

.c {
  background: green;
}

Answer 3

Answer №2

.container {
  height: 300px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}

.container div {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div:nth-child(1) {
  background-color: green;
}

.container div:nth-child(2) {
  grid-row: 2 span;
  background-color: blue;
}

.container div:nth-child(3) {
  background-color: red;
}

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Does this achieve the desired outcome? "Grid" is designed for these types of layouts.

Regarding bootstrap - the latest version defaults to using "flex".

Answer 4

.container {
  height: 300px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}

.container div {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div:nth-child(1) {
  background-color: green;
}

.container div:nth-child(2) {
  grid-row: 2 span;
  background-color: blue;
}

.container div:nth-child(3) {
  background-color: red;
}

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Does this achieve the desired outcome? "Grid" is designed for these types of layouts.

Regarding bootstrap - the latest version defaults to using "flex".

Answer 5

Answer №3

To solve the issue, consider adding one more div as shown below.

This solution should prove helpful.

Link to CodePen example

HTML

<div class="container">
      <div class="subcontainer">
        <div class="box blue">BOX 1</div>
        <div class="box red">BOX 3</div>
      </div>
      <div class="box green">
         Box 2
      </div>
    <div>

CSS

.container {
  display: flex;
}

.box {
  width: 60px;
  height: auto;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

Answer 6

To solve the issue, consider adding one more div as shown below.

This solution should prove helpful.

Link to CodePen example

HTML

<div class="container">
      <div class="subcontainer">
        <div class="box blue">BOX 1</div>
        <div class="box red">BOX 3</div>
      </div>
      <div class="box green">
         Box 2
      </div>
    <div>

CSS

.container {
  display: flex;
}

.box {
  width: 60px;
  height: auto;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

Is there a way to extend a div to occupy two rows?

Answer №1

Answer №2

Answer №3

Similar questions

Expandable Checkout Form for Woocommerce

Buttons and links with intricate geometries

Using padding and float properties in the a tag of HTML does not result in the expected behavior

Implement a counter in a JavaScript table, initializing it to zero

Don't forget to keep track of when the user has closed

The bottom of the page displays varying outcomes between Code Snippet (CodePen) and Angular

Vanishing Span in CSS3 Flexboxes

Host your own website online using your personal computer

How can I center two images using a hover effect in WordPress?

How do you set a background image for the color of the font?

Output MySQL information into an HTML form with radio buttons and an additional text field

What is the method for customizing the color of the drop-down arrow in

TinyMCE file multimedia upload feature allows users to easily add audio, video

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

Attempting to implement scroll-based animation on my webpage

What is the best way to access the form button inside a div element?

JavaScript error leading to ERR_ABORTED message showing up in the console

supplying various color variables to a single class

Design a custom cover page before printing using the window.print() method

Align content to the bottom using Bootstrap 4