2x2 Box next to 1 large 2x2 box using css
Is it possible to do both on a ul li structure with flexbox? I tried to make the width of the squares 25% and the width of the 1st, 3rd or 5th to 50% with the clear: lefts trick and the combination of float: left and rights. But somehow the last square tends to fall one line.
HTML:
<ul id="test">
<li class="item">
A
</li>
<li class="item">
B
</li>
<li class="item">
C
</li>
<li class="item">
D
</li>
<li class="item">
E
</li>
</ul>
CSS
#test {
list-style:none;
width:100%;
}
.item {
width:33%;
float:left;
background-color: #444
}
source to share
This can be done with Flexbox, but you need to set a fixed height on the flex-container, or ul
in this case. Then you can use flex-direction: column
and flex-wrap: wrap
to make the items break into a new column when they reach their maximum height.
Also if you want to use margins you need to include them in height using calc()
#test {
list-style: none;
display: flex;
flex-direction: column;
height: 300px;
flex-wrap: wrap;
padding: 0;
}
.item {
background: #CF509D;
margin: 10px;
}
.item:first-child {
flex: 0 0 calc(100% - 20px);
margin-left: 0;
width: 50%;
}
.item:not(:first-child) {
flex: 0 0 calc(50% - 20px);
width: calc(25% - 20px);
}
<ul id="test">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
</ul>
And this is how you can do it using Grid Layout
#test {
display: grid;
min-height: 300px;
grid-template-columns: 50% 1fr 1fr;
list-style: none;
padding: 0;
}
.item {
background: #D04E98;
margin: 10px;
}
.item:first-child {
grid-row: 1 / 3;
}
<ul id="test">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
</ul>
source to share
Flexbox is not designed for this utility. With flex, you can only display one-dimensional structures, such as evenly distributing items along the X or Y axis.
CSS-Grid is your new friend in this case.
As long as you don't mind the lack of support for some browsers, this should be a directive.
(current support here http://caniuse.com/#search=CSS%20Grid%20Layout )
#test {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
list-style:none;
padding: 0;
margin: 0;
height: 200px; /* just for demo */
}
.item {
background-color: #D04E98
}
.item:first-child {
grid-column: span 2;
grid-row: span 2;
}
<ul id="test">
<li class="item">
A
</li>
<li class="item">
B
</li>
<li class="item">
C
</li>
<li class="item">
D
</li>
<li class="item">
E
</li>
</ul>
source to share
Something like that
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
#test {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
.item {
width: 33.33%;
float: left;
padding:5px;
height:100px;
color:#fff;
}
.item:first-child {
height: 200px;
}
.item>span {
background-color: #444;
display: block;
height: 100%;
}
<ul id="test">
<li class="item">
<span>A</span>
</li>
<li class="item">
<span>B</span>
</li>
<li class="item">
<span>C</span>
</li>
<li class="item">
<span>D</span>
</li>
<li class="item">
<span>E</span>
</li>
</ul>
source to share
I am trying to solve this 2 * 2 square using flexbox. Please see the link.
<ul class="box">
<li class="left">5</li>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</ul>
.box{
width: 500px;
height:100%;
display: flex;
}
.left {
width: 200px;
height:200px;
background: #000;
list-style:none;
}
.right{
display: flex;
flex-flow:wrap;
justify-content: space-around;
}
.right li{
width:95px;
height:95px;
background: #000;
margin: 5px;
flex:1 1 50;
list-style:none;
}
source to share