Using the grid-row and grid-column properties. More information: http://gridbyexample.com/examples/#example3
A Pen by rachelandrew on CodePen.
Using the grid-row and grid-column properties. More information: http://gridbyexample.com/examples/#example3
A Pen by rachelandrew on CodePen.
<div class="wrapper"> | |
<div class="box a">A</div> | |
<div class="box b">B</div> | |
<div class="box c">C</div> | |
<div class="box d">D</div> | |
<div class="box e">E</div> | |
<div class="box f">F</div> | |
</div> |
body { | |
margin: 40px; | |
} | |
.wrapper { | |
display: grid; | |
grid-gap: 10px; | |
grid-template-columns: 100px 100px 100px; | |
background-color: #fff; | |
color: #444; | |
} | |
.box { | |
background-color: #444; | |
color: #fff; | |
border-radius: 5px; | |
padding: 20px; | |
font-size: 150%; | |
} | |
.a { | |
grid-column: 2 / 3; | |
grid-row: 1 / 2; | |
} | |
.b { | |
grid-column: 2 / 3; | |
grid-row: 2 / 3; | |
} | |
.c { | |
grid-column: 3 / 4; | |
grid-row: 2 / 3; | |
} | |
.d { | |
grid-column: 1 / 2; | |
grid-row: 1 / 2; | |
} | |
.e { | |
grid-column: 1 / 2; | |
grid-row: 2 / 3; | |
} | |
.f { | |
grid-column: 3 / 4; | |
grid-row: 1 / 2; | |
} |