TAG
CSS
Result
Run
License
<div class="grid-wrapper"> <div class="item1"><h2>1</h2></div> <div class="item2"><h2>2</h2></div> <div class="item3"><h2>3</h2></div> <div class="item4"><h2>4</h2></div> <div class="item5"><h2>5</h2></div> </div>
.grid-wrapper { display: grid; grid: "item1 item1 ." 100px "item2 . item3" "item4 item5 ." / minmax(100px, 0.7fr) auto 100px; grid-gap: 10px; padding: 10px; background: #00cbff; } .grid-wrapper > .item1 { grid-area: item1; } .grid-wrapper > .item2 { grid-area: item2; } .grid-wrapper > .item3 { grid-area: item3; } .grid-wrapper > .item4 { grid-area: item4; } .grid-wrapper > .item5 { grid-area: item5; } .grid-wrapper > div { background: rgba(255, 255, 255, 0.8); text-align: center; }
Console
expand_less
License
License
by DevDic
Close