CSS Flex Multiple Dimension Mesh

Question

I have a problem with flex.

I have a wrapper where a minimum of 1 and a maximum of 9 squares can be displayed. Squares can have several sizes, depending on the number of squares in the grid. I have all the necessary work cases, except for one, as can be seen in this picture:

My styles:

.grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: space-between; width: 300px; height: 300px; position: relative; } 

Plus Images have a size based on their total number and their position in the list.

So the problem is when I have 1 large square (occupies the position of 4 small squares) and 5 small squares around it on the right and bottom.

Big, first, how it should be.

Next to it (upper right corner) is the second, which is also correct.

The third is in the lower left corner, and it should be in the second row and in the right corner. Because of this, everyone else is in the wrong position, so the latter overflows.

I tried many combinations of values ​​for justify-content , align-content , align-items and align-self , but nothing worked.

I will return to a ton of classes and deliver an absolute solution if there is no flexible solution for this. But I do not like it. It's too many styles and it doesn't look very good.

Any advice is appreciated.

Answer 1

I think float is the best option for you, check out this snippet:

 .grid { width: 300px; } .box { background: orange; width: 90px; height: 90px; margin: 5px; float: left; } .wide { width: 190px; } .tall { height: 190px; } .empty { background: transparent } /* you can ignore everything after this comment - it all for illustration */ body { background: #334; color: white; font-family: sans-serif; } .example { display: inline-block; margin: 5px; border: 1px solid #445; padding: 10px; width: 300px; } h3 { margin: 0 0 5px 0; } 

 <div class="example"> <h3>Example 1</h3> <div class="grid"> <div class="box wide tall"></div> <div class="box tall empty"></div> <div class="box wide empty"></div> <div class="box"></div> </div> </div> <div class="example"> <h3>Example 2</h3> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> <div class="example"> <h3>Example 4</h3> <div class="grid"> <div class="box wide tall"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> 

Flex is still trying to create complete lines of elements, so your large square and your small square are part of the same line; there is no support for styling above this.

Float, on the other hand, is trying to populate elements wherever they are.

EDIT

I updated this answer with examples of how to reproduce most of the images above (I purposefully refused example 2 by 2), did not want to clothe the answer with classes for drawers of size 1.5 height / width).

Using the empty class to remove color from blocks, as well as the tall and wide classes to fill in spots of all sizes should help you customize the layout as you see fit. One note - here empty sets the background color to transparent . Your empty class can do more or less of this. You might not even need the empty class if all of this is a div with no content.

Answer 2

It is not possible to process this layout using flex in a single container.

You need to do a little trick to achieve this.

The simpler it is to derive the third element from the flexible layout, the more absolute it will be:

 .grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: space-between; width: 300px; height: 300px; position: relative; } .item { background-color: lightblue; width: 100px; height: 100px; margin: 0px; border: transparent solid 5px; box-sizing: border-box; background-clip: content-box; } .item:first-child { width: 200px; height: 200px; } .item:nth-child(2) { background-color: blue; position: absolute; top: 100px; right: 0px; } 

 <div class="grid"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

Another possibility may be more in the idea of ​​flex, but also complex

Define a large element with a negative negative edge, which causes it to occupy only 1 row (which is the height of the row the size of small fields).

Now we get a layout with 3 lines. The problem will be that the third box will be under the first big box. To solve this problem, we install a pseudo-element (I developed a fragment to make it visible, when producing just set it to a height of 0 and it will disappear) with the same width and field properties of the first element.

 .grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: space-between; width: 300px; height: 300px; position: relative; } .grid:after { content: ""; order: 3; background-color: red; width: 190px; height: 10px; margin: 5px; } .item { background-color: lightblue; width: 90px; height: 90px; margin: 5px; } .item:first-child { width: 190px; height: 190px; margin-bottom: -100px; order: 1; opacity: 0.5; } .item:nth-child(2) { order: 2; } .item:nth-child(n+3) { order: 4; } 

 <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>