Flexbox/Float anchor items to top

Question

Consider this example:

Notice that that 4th item is pushed to top instead of aligning with the 3rd item. I can't achieve this using flexbox's align-items: flex-end, neither with floats.

I am aware of achieving this by using masonry/isotope, but I would like to avoid using javascript just for this layout.

Is it possible to achieve using only CSS?

i think you added separate row but did't add flex to that rows - https://jsfiddle.net/ouu6kh61/ , if added flex to rows https://jsfiddle.net/ouu6kh61/1/ — bhv, Jul 20 '17 at 05:04
Their is pretty much only 2 ways, using Flexbox, where you either give the parent a height or wrap them in 2 columns: https://jsfiddle.net/d0z0p76q/ ... And using a wrapper, you don't even need Flexbox: https://jsfiddle.net/rxxommjg/ — Asons, Jul 20 '17 at 11:32

Vadim Ovchinnikov · Answer 1 · 2017-07-20T05:16:27.157

Yes, it's possible via CSS Grid Layout:

.grid {
  display: grid;
  grid-gap: 10px 30px;
  grid-template-rows: auto 1fr auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  align-self: flex-start;
}

.a {
  grid-row: 1 / span 2;
  /* setting height just for demo */
  height: 200px;
}

.b {
  grid-column: 2;
}

.c {
  grid-row: 3;
}

.d {
  grid-column: 2;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>

If you need IE\Edge support you should use old grid syntax. You can fake grid-gap using additional grid columns and rows. Demo:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 30px 1fr;
  -ms-grid-rows: auto 10px 1fr 10px auto;
  grid-template-rows: auto 10px 1fr 10px auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  -ms-grid-row-align: start;
  align-self: flex-start;
}

.a {
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
  /* setting height just for demo */ 
  height: 200px;
}

.b {
  -ms-grid-column: 3;
  grid-column: 3;
}

.c {
  -ms-grid-row: 5;
  grid-row: 5;
}

.d {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 3;
  grid-row: 3;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>

Flexbox/Float anchor items to top

1 Answers1