如果我未在css-grid中指定装订线尺寸，为什么我不会得到两行（而是得到两列）

问题描述 投票：0回答：1
我有一个html页面，其中导航行1行，主体行1行。我已使用css-grid指定了两行。我已经命名了不同的网格区域

index.css

.grid-container{ display:grid; grid-template-rows:[nav-row-start]40px [nav-row-end] [body-row-start] auto [body-row-end]; } .my-border { border:1px solid black; } .my-nav-height{ height:40px; } div{ height:100vh; } #nav{ grid-row:nav-row-start/nav-row-end; } #body{ grid-row:body-row-start/body-row-end; } 

index.html

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="index.css"> <title>something</title> </head> <body> <div class="grid-container"> <div id="nav" class="my-border my-nav-height">nav bar</div> <div id="body" class="my-border my-body-height">body</div> </div> </body> </html> 

我看到了（2列而不是两行）

enter image description here

但是如果我为装订线添加0px尺寸，那么我会看到两行

enter image description here

装订线尺寸是强制性的吗？

我有一个html页面，其中导航行1行，主体行1行。我已经使用css-grid指定了两行。我已将不同的网格区域命名为index.css .grid-container {display：grid; grid -...

css-grid
1个回答
0
投票
这是一个简单的语法错误。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.