为什么我的网格模板列和网格模板行不起作用？

Question

this is my render on picture 为什么 grid-template-columns 和 grid-template-rows 工作起来很奇怪，我错过了什么？

我已经放置了网格模板列和网格模板行显示：网格；但它不起作用.....

html:
 <div class="parent" > 
       <div class="box box1">box1</div>
       <div class="box box2">box2</div>
       <div class="box box3">box3</div>  <div class="box box4">box4<div>
       <div class="box box5">box5</div> 
       <div class="box box6">box6</div>
       <div class="box box7">box7</div>  <div class="box box8">box8<div>
       <div class="box box9">box9</div>
   </div>


css:

.parent{
    background-color: rgb(106, 110, 102);
    width: 800px;
    height: 800px;
    display: grid;
    grid-template-columns: 100px 50% 100px;
    grid-template-rows: 200px 200px 200px ;
}

.box{
width: 100px;
height: 100px;
background-color: rgb(190, 190, 6);
border: 2px solid rgb(255, 255, 255);
border-radius: 5px;
}

Answer 1

突出的两个 div 缺少结束 div 标签

<div class="box box4">box4<div>

为什么我的网格模板列和网格模板行不起作用？

why my grid-template-columns and grid-template-rows don't work?

grid