0

I'm trying to create this style of gallery layout with flexbox, but running into some trouble.

enter image description here

So far my code is putting two small ones and the large one in the top row, and then the second small ones on the bottom row.

John White
  • 121
  • 4
  • 20
  • Can you please paste your code snippet too? It will help us identify the issue. – Anshuman Yadav Sep 23 '21 at 15:46
  • You should use grid as it has easier implementation. Check some online grid visualiser tools for help – Servesh Chaturvedi Sep 23 '21 at 15:54
  • Use grid as mentioned: **CSS Grid and Flexbox are layout models that share similarities and can be used together. The key difference is that CSS Grid can be used to create two-dimensional layouts, while Flexbox can only be used to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox.** [Read more](https://blog.hubspot.com/website/css-grid-vs-flexbox) – Rob Moll Sep 23 '21 at 16:05

2 Answers2

0

Something like this.

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.item {
  width: 100%;
  margin: 1em;
}

.content {
  border: 1px solid black;
  margin-bottom: 1em;
  height: 100%;
}
<div class="container">
  <div class="item">
    <div class="content">half</div>
    <div class="content">half</div>
  </div>
  <div class="item content">full</div>
  <div class="item">
    <div class="content">half</div>
    <div class="content">half</div>
  </div>
</div>
Andrey Tinyakov
  • 131
  • 5
-1

Html

        <div class"parent">
            <div class="leftContent"></div>
            <div class="centerContent"></div>
            <div class="rightContent"></div>
        </div>

Css

.parent{
 width: 100%;
 display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.leftContent{
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}
.rightContent{
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}

add now the contents in the divs. i think this should work

mouafus
  • 148
  • 7