CODEWITHSUNDEEP
cssflexbox
dace
dace

Reputation: 6363

How to create both rows and columns in css (or flexbox)?

Is there any way to align responsive divs using both rows and columns in either flexbox or css like so:

enter image description here

Because of the ordering (and a mobile breakpoint), I can't simply do columns and because of the slight offsets, rows don't really work.

Should note that when resized for mobile, it should stack on top based on the numbered order.

Any and all help is appreciated.

Upvotes: 2

Views: 7156

Answers (4)

rachelandrew
rachelandrew

Reputation: 1

This isn't really a use case Flexbox was designed for. The upcoming CSS Grid Layout specification is designed for two dimensional layout like this.

Until that lands in browsers you might be better looking at older methods to achieve this. The Susy Grid is worth a look for doing this sort of thing, I've been testing it while working on Grid Layout examples as an example of the sorts of things people want to do with grids in CSS.

Upvotes: 0

Oriol
Oriol

Reputation: 287960

You can wrap the elements in columns, and on mobile use display: contents. It is not widely supported yet, though.

#wrapper {
  display: flex;
  height: 400px;
}
.column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.item {
  background: #66D8A4;
  margin: 1em;
  padding: 1em;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.column:first-child > :last-child, .column:last-child > :first-child {
  flex-grow: 2;
}
@media (max-width: 800px) {
  #wrapper {
    flex-direction: column;
  }
  .column {
    display: contents;
  }
}
<div id="wrapper">
  <div class="column">
    <div class="item" style="order:1">1</div>
    <div class="item" style="order:4">4</div>
  </div>
  <div class="column">
    <div class="item" style="order:2">2</div>
  </div>
  <div class="column">
    <div class="item" style="order:3">3</div>
    <div class="item" style="order:5">5</div>
  </div>
</div>

Another way would be not using wrappers for the columns, and using break-* properties to force column breaks. I explained this technique in this other answer. However, no browser seems to support this yet.

Upvotes: 1

darronz
darronz

Reputation: 903

You could create 3 columns using flexbox. Then nest your additional panels within those columns.

Chances are you can't do this in pure css and will have to resort to some form of JavaScript library (something like https://golden-layout.com)

Upvotes: 0

Jimmy Obonyo Abor
Jimmy Obonyo Abor

Reputation: 7875

My best solution would to use mansory plugin http://masonry.desandro.com/ to layout your divs and specify breakpoints using the plugin modules ,however since you prefer flexbox style css probably this link would shead more light on that http://learnlayout.com/flexbox.html

Upvotes: 0

Related Questions