Playing with flexbox
A Pen by Julia Rechkunova on CodePen.
<section class="layers"> | |
<div class="grid layer"> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
<div class="grid__column"></div> | |
</div> | |
<div class="rows layer"> | |
<!-- row 1 --> | |
<div class="row"> | |
<div class="row__item">1/2</div> | |
<div class="row__item">1/2</div> | |
</div> | |
<!-- row 2 --> | |
<div class="row"> | |
<div class="row__item">1/3</div> | |
<div class="row__item">1/3</div> | |
<div class="row__item">1/3</div> | |
</div> | |
<!-- row 3--> | |
<div class="row"> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
</div> | |
<!-- row 4 --> | |
<div class="row"> | |
<div class="row__item">1/6</div> | |
<div class="row__item">1/6</div> | |
<div class="row__item row__item--double">2/6</div> | |
<div class="row__item">1/6</div> | |
<div class="row__item">1/6</div> | |
</div> | |
<!-- row 5 --> | |
<div class="row"> | |
<div class="row__item row__item--double">2/3</div> | |
<div class="row__item">1/3</div> | |
</div> | |
<!-- row 6 --> | |
<div class="row"> | |
<div class="row__item row__item--double">1/2</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
</div> | |
<!-- row 7 with nesting --> | |
<div class="row"> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item row__item--double"> | |
1/2 | |
<div class="row"> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
<div class="row__item">1/4</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> |
@color: #c0c0c0; | |
@background: #fbfbfb; | |
@gutter: 10px; | |
@border-size: 1px; | |
body { | |
padding: 0; | |
margin: 0; | |
color: @color; | |
font-family: verdana; | |
} | |
.layers { | |
position: relative; | |
top: 0; | |
max-width: 960px; | |
min-width: 320px; | |
height: 100vh; | |
margin: 0 auto; | |
} | |
.layer { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.grid { | |
display: flex; | |
} | |
.grid__column { | |
flex-grow: 1; | |
flex-shrink: 1; | |
margin: 0 @gutter; | |
background: @background; | |
border-left: @border-size dashed @color; | |
border-right: @border-size dashed @color; | |
} | |
.row { | |
display: flex; | |
} | |
.row__item { | |
flex-grow: 1; | |
flex-shrink: 1; | |
flex-basis: 0; | |
margin: @gutter; | |
padding: 10px 0; | |
text-align: center; | |
border: @border-size solid @color; | |
border-radius: 4px; | |
background: #fff; | |
&--double { | |
flex-grow: 2; | |
flex-shrink: 2; | |
flex-basis: 2 * @border-size + 2 * @gutter; | |
} | |
} |
Playing with flexbox
A Pen by Julia Rechkunova on CodePen.