还是前端初级教程关于网格布局的小问题

liuganglove2018 · 发表于 2023-8-31 17:53

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style type="text/css">
*{margin:0px 1px;}
.grid-container{display:grid;grid-template-rows:1fr 2fr 3fr;grid-template-columns:1fr 2fr 3fr;}
.grid-container{margin:1px;width:300px;height:300px;grid-gap:0px 1px;border:1px gray solid;}
.grid-container{grid-template-areas:"na na na""si co co""si com cn"}
.grid-item{border:1px orange dotted;}
.grid-item:nth-child(1){na;}
.grid-item:nth-child(2){si;}
.grid-item:nth-child(3){co;}
.grid-item:nth-child(4){com;}
.grid-item:nth-child(5){cn;}
</style>
<body>
<div class="grid-container">
<p class="grid-item">1</p>
<p class="grid-item">2</p>
<p class="grid-item">3</p>
<p class="grid-item">4</p>
<p class="grid-item">5</p>
</div>
</body>
</html>

-------------
代码如上，为什么不能实现我想要的效果，在不改变方法的情况下，是哪里写错了吗，实现二维布局的效果。

beize1226 · 发表于 2023-8-31 19:26

[CSS] 纯文本查看 复制代码

        .grid-item:nth-child(1) {
            grid-area: na;
        }
        
        .grid-item:nth-child(2) {
            grid-area: si;
        }
        
        .grid-item:nth-child(3) {
            grid-area: co;
        }
        
        .grid-item:nth-child(4) {
            grid-area: com;
        }
        
        .grid-item:nth-child(5) {
            grid-area: cn;
        }

没有声明每个item的grid-area

hbe · 发表于 2023-8-31 19:41

本帖最后由 hbe 于 2023-8-31 19:45 编辑

无 grid-area

liuganglove2018 · 发表于 2023-8-31 22:29

beize1226 发表于 2023-8-31 19:26
[mw_shl_code=css,true]       .grid-item:nth-child(1) {
         grid-area: na;
      }

小错误不断，谢谢了，

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 还是前端初级教程关于网格布局的小问题