Is there a way to achieve a flex layout without having to modify the HTML structure?

Question

Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS:

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

This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item-1 {
  flex: 50%;
}

.item-2 {
  flex: 50%;
}

.item-3 {
  flex: 100%;
}

<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short desc goes here.
  </div>
</div>

Any suggestions on how to resolve this issue? Thank you!

html css flexbox

Answer 1

Answer №1

If you're in need of a solution using a grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*creating two equal width columns.*/
  grid-template-rows: auto auto;
  /*defining two rows with auto height. */
  grid-gap: 10px;
}

.item-1 {
  grid-row: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short description goes here.
  </div>
</div>

Answer 2

If you're in need of a solution using a grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*creating two equal width columns.*/
  grid-template-rows: auto auto;
  /*defining two rows with auto height. */
  grid-gap: 10px;
}

.item-1 {
  grid-row: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short description goes here.
  </div>
</div>

Is there a way to achieve a flex layout without having to modify the HTML structure?

Answer №1

Similar questions

Chat box custom scrollbar always positioned at the bottom

disabling responsiveness in Bootstrap 2

Is there an easy method for customizing scrollbars?

Calculate the total price using Jquery once selections have been made

Using PHP header function to redirect to a specific form on an HTML page: A step-by-step guide

jQuery code runs smoothly on Firefox but encounters issues on Chrome

When hovering, the <a> element does not fully encompass the background color

When interacting with Chrome, the div gets automatically blurred upon being clicked

I am attempting to execute an ASP.NET function using an HTML submit button, but for some reason the function is not being triggered

How can I display just the time portion of a date in AngularJS?

Easily input new information into your MySQL database with just a click by utilizing a link through PHP and HTML

Python AssertionError: The argument passed to the write() function in GAE must be a

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

Eliminate the unnecessary gap below the image

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

How can I dynamically retrieve the width of an image in React as the screen size changes?

Using jQuery to remove an iframe upon a click event

The nth-of-type function behaving similarly to the nth-child function

Tips for adjusting the height of a jQuery UI widget control through CSS

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript