Question 44485 in Html Question posted in
Some basic documentation can be found here.

Make flexbox items stick together on the cross-axis? – Html

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?

Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search