html - 为什么我的嵌套网格容器没有创建等宽的列?
问题描述
所以我是 CSS 网格的新手,我一直在玩弄它。我想看看我是否可以在一般意义上将这个模型的布局与我一直在编写的一些实验代码相匹配:https ://ibb.co/GFYqMRx
这是我的 HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="header">Header</div>
<div class="side-navigation">Side Navigation</div>
<main class="main">
<div class="item search">Search</div>
<div class="item traffic">Traffic</div>
<div class="item daily-traffic">Daily Traffic </div>
<div class="item mobile-users">Mobile Users</div>
<div class="item social-stats">Social Stats</div>
<div class="item new-members">New Members</div>
<div class="item recent-activity">Recent Activity</div>
<div class="item message-user">Message User</div>
<div class="item settings">Settings</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>
这是我的CSS:
* {
box-sizing: border-box;
}
.item {
border: 1px red solid;
}
.header {
background-color: purple;
grid-area: header;
}
.side-navigation {
background-color: orange;
grid-area: side-navigation;
}
.main {
background-color: grey;
grid-area: main;
}
.search {
grid-area: search;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-user {
grid-area: message-user;
}
.settings {
grid-area: settings;
}
body {
display: grid;
grid-template-rows: 80px 80px 1fr;
grid-template-areas:
"header"
"side-navigation"
"main";
}
@media (min-width: 769px) {
body {
grid-template-columns: 80px 1fr;
grid-template-rows: 80px 1fr;
grid-template-areas:
"header header"
"side-navigation main"
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
}
}
我首先能够通过操纵网格线来创建所需的布局,但我想看看我是否可以通过单独使用 grid-template-areas 属性来做同样的事情。
对于大于 769px 的屏幕尺寸,我将嵌套的主容器分成两列,每列 1fr,但安装第三列后我最终得到了一些奇怪的效果:
为什么我无法在嵌套的主容器中创建等宽列?如果我为网格模板列放置两个 fr 单位,我的网格不应该被平均分成两半吗?
在我将网格应用于嵌套的主容器之前,一切都运行良好。
为什么我的网格项目在屏幕底部像这样乱七八糟?
解决方案
我认为这与所有grid-area:
标签有关,没有grid-template-areas:
规则来定义它们的去向。我刚刚在开发工具中检查了您的代码,当我删除这些grid-area:
标签时,它变成了一个 2 列网格。
为 .main 添加一个网格模板区域
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
grid-template-areas:
"search traffic"
"daily-traffic mobile-users"
"social-stats new-members"
"recent-activity message-user"
"settings ............";
}
网格模板区域中的所有额外(超过 1 个)空白都将被忽略,因此您可以添加额外的空格来对齐列。另外,请注意“。” 最后你使用'。或多个(就像多余的空白被忽略)表示将该单元格留空。如果您在最后删除这些句点,整个事情都会中断,每个单元格都必须在您的网格模板区域中考虑。
Rachel Andrew 在 CSS 网格上有很多很棒的资料。 https://www.youtube.com/watch?v=RssSS_xhv2E
推荐阅读
- python - 错误 404 - 让样式表在瓶中工作(Python 网络框架)
- flutter - 如何在 Flutter 中更新我的 ListView 并解决 StateFull Widget 的问题?
- python - 如何在 Python 中打印具有不同数据类型的嵌套列表的元素?
- bluej - 如何使用 switch case 而不是 if else 来制作这个程序。请基本编码,我只在 9 年级
- c++ - 谁能解释一下 [](int i){ return i % 2 == 0; } 方法?
- android - React Native 升级 vs React Native 新应用
- docker - 在基于 Docker 的 Jenkins 代理中找不到 Go
- javascript - 如何使用 nextPageToken 从 google api 检索联系人列表。工作示例
- python - 如何在 Python 中解析包含 JSON 的列表中的数据?
- javascript - 如果和其他条件不适用于所有语句jQuery