grid layoutができない

前提

grid layout で画像のように写したいです。

同じデザインのcodepenはきちんと反映されました。
https://gridbyexample.com/examples/example32/

現状です。

該当のソースコード

html

<!-- GRID SYSTEM --> <div class="gird-wrapper"> <div class="item item-A">A</div> <div class="item item-B">B</div> <div class="item item-C">C</div> <div class="item item-D">D</div> <div class="item item-E">E</div> </div> <!--codepen --> <div class="wrapper"> <div class="box item1">One</div> <div class="box item2">Two</div> <div class="box item3">Three</div> <div class="box item4">Four</div> <div class="box item5">Five</div></div>

css

/* GRID SYSTEM */ .grid-wrapper { display: grid; grid-template-rows: 100px 110px 90px; grid-template-columns: 250px 1fr 1fr; width: 500px; height: 400px; } .item { color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;} .item-A { grid-row: 1 / 2; grid-column: 1 / 4; background: #f88;} .item-B { grid-row: 2 / 4; grid-column: 1/ 2; background: #7FB77E;} .item-C { grid-row: 2 / 4; grid-column: 2/ 4; background: #FFC090; }.item-D { grid-row: 3/ 4; grid-column: 2/ 3; background: #D300C5; }.item-E { grid-row: 3 / 4; grid-column: 3/ 4; background: #ccc; } /* codepen *//* html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } */ .wrapper { margin: 0 0 20px 0; width: 500px; height: 400px; border: 2px solid #1D9BF0; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); justify-content: center; align-content: end; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .item1 { grid-column: 1 / 5; } .item2 { grid-column: 1 / 3; grid-row: 2 / 4; } .item3 { grid-column: 3 / 5; }