1

I'm trying to achieve this layout with flexbox: One large square surrounded by little squared

Is it possible with flexbox? I can't wrap these in separate sections at the moment, so it's just a huge list like so:

<li>2x2</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>

Any input would be greatly appreciated

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Andrew Lazarus
  • 989
  • 2
  • 16
  • 25
  • 2
    It's possible with nested flex containers. But if that's not an option, consider [Masonry](http://masonry.desandro.com/) or, when it has more browser support, [CSS Grids](https://drafts.csswg.org/css-grid/). – Michael Benjamin May 02 '16 at 16:03
  • Flex items are arranged in columns or rows. Here the first item would occupy either two columns or two rows, and that's not allowed. Well, with certain assumptions you could manage it in a hacky way, but not recommended. – Oriol May 02 '16 at 16:26
  • I'm playing around without flexbox currently, but it's very... specific : http://codepen.io/yratof/full/mPWYyB/ – Andrew Lazarus May 02 '16 at 22:34

1 Answers1

0

If anyone finds this question, too: It was answered here and I successfully implemented it using CSS Grid. The trick is to scale all elements for the "small" grid and manually enlarge to first one to use two rows and two columns.

JSFiddle Example for 6 columns and 3 rows

grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

grid-item:first-child {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

grid-item {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

answer on stack overflow

Samuel
  • 11
  • 2