0

Right now I am using flexbox to create a gallery of images with three columns. (I am not sure if this is better achieved by flexbox or grid, but flexbox makes sense to me as I don't want fixed grids).

However, I cannot seem to figure out a way to make items stick to each other in the cross axis. For example, this is how my gallery looks now: Image E and F are staying in their respective places, when the behaviour I want is this:, where Image E and F stick to B and C respectively.

How can this be achieved by flexbox? Or if not, is it possible with grid?

Fateme Ghalandari
  • 87
  • 7
mesyeux
  • 1
  • 1
  • Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – VelizarStavrev Mar 05 '23 at 21:41

2 Answers2

0

This is not achievable not with grid nor flex (grid masonry does this but not implemented yet). You must use a grid with 3 columns and each column is a flex container. (this could be done differently)

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

body>div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

body>div:nth-child(1) div:first-child {
  block-size: 100px;
  background-color: coral;
}

body>div:nth-child(1) div:last-child {
  block-size: 120px;
  background-color: blueviolet;
}

body>div:nth-child(2) div:first-child {
  block-size: 90px;
  background-color: aquamarine;
}

body>div:nth-child(2) div:last-child {
  block-size: 80px;
  background-color: brown;
}

body>div:nth-child(3) div:first-child {
  block-size: 130px;
  background-color: bisque;
}

body>div:nth-child(3) div:last-child {
  block-size: 50px;
  background-color: violet;
}
  <body>
    <div>
      <div>A</div>
      <div>B</div>
    </div>
    <div>
      <div>C</div>
      <div>D</div>
    </div>
    <div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
Mahdi
  • 101
  • 7
0

It can be done with flexbox alone but it's more trouble than it's worth and you need to rearrange img order, code snippet below. Css code can be a lot shorter, this is just to show you it can be done. You can also customize percentages/margins/whatever makes it suit your project needs. It also has the advantage that you may add additional blocks to your column; and it's responsive + I added padding/borders so you may better understand how it works.

.main-container {
  border:1px solid red;
  width 100%;
  display:flex;
  padding: 10px;
  gap: 10px;
}

.row{
  width: 33%;
  height:  300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.left,
.middle,
.right{
  border: 1px solid black;
  gap: 10px;
}

.left div,
.middle div,
.right div {
  width: 100%;
  color:white;
  text-align: center;
  padding-top:  10px;
  font-size: 26px;
  font-weight: 600;
}

.left div:first-child {
  background-color: red;
  height: 40%;
}

.left div:last-child {
  background-color: blue;
  height: 60%;
}

.middle div:first-child {
  background-color: green;
  height: 20%;
}

.middle div:last-child {
  background-color: orange;
  height: 80%;
}

.right div:first-child {
  background-color: purple;
  height: 73%;
}

.right div:last-child {
  background-color: brown;
  height: 27%;
}
<div class="main-container">
  <div class="left row">
    <div>A</div>
    <div>B</div>
  </div>
  <div class="middle row">
    <div>C</div>
    <div>D</div>
  </div>
  <div class="right row">
    <div>E</div>
    <div>F</div>
  </div>
</div>
MaFomedanu
  • 120
  • 7