i tried to achieve a grid like pattern with a negative margin based grid system (susy) and failed.
I tried to use flexbox, but i am not sure if its really possible, i thought the best approach would be 2 columns (side A and B) and give the boxes (1) the flex height of 50% of boxes 2, but it somehow doesn't seem to work.
this is as far as i got it working.
.block {
width: 100%;
background: grey
}
.column {
align-content: stretch;
display: flex;
flex-flow: column wrap;
width: 50%;
}
.box_long {
background-color: pink;
flex: 0 0 50%;
padding: 20px;
border: solid 1px black;
}
.box_small {
background-color: blue;
flex: 0 0 25%;
padding: 20px;
border: solid 1px black;
}
.box_big {
background-color: green;
flex: 0 0 100%;
padding: 20px;
border: solid 1px black;
}
<div class="block">
<div class="column">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>
Here's one method that may work for you:
(No changes to the HTML.)
.block {
display: flex;
height: 100vh;
background: grey;
}
.column {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.box_big {
flex-basis: 100%;
height: 70%;
background-color: chartreuse;
border: solid 1px black;
}
.box_small {
flex: 0 0 50%;
height: 35%;
background-color: aqua;
border: solid 1px black;
}
.box_long {
flex-basis: 100%;
height: 30%;
background-color: violet;
border: solid 1px black;
}
* {
margin: 0;
box-sizing: border-box;
}
<div class="block">
<div class="column">
<div class="box_long"></div>
<div class="box_big"></div>
</div>
<div class="column">
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_long"></div>
</div>
</div>
jsFiddle
Is this what you looking for?
* {
box-sizing: border-box
}
.block {
background: grey;
display: flex;
height: 250px;
}
.column {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.column.col {
flex-direction: column;
flex-wrap: nowrap;
}
.column.col div {
flex: 1;
border: 1px solid black;
}
.column.row div {
border: 1px solid black;
flex-basis: 50%;
height: 25%;
}
.column.row .box_long {
height: 50%;
flex-basis: 100%;
}
.box_long {
background-color: pink;
}
.box_small {
background-color: blue;
}
.box_big {
background-color: green;
}
<div class="block">
<div class="column col">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column row">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>
来源:https://stackoverflow.com/questions/42353794/struggling-with-a-nested-flexbox-grid