小编use*_*797的帖子
为什么具有网格区域名称但未在grid-template-area中定义的网格项目会创建附加列？
我创建了一个简单的CSS网格，我决定不指定grid-template，grid-template-columns，grid-template-rows的属性。
相反，我从开始grid-template-areas，并通过属性将区域名称分配给了网格项grid-area。
之后，我对如果从中删除grid-item会发生什么感兴趣grid-template-areas。结果有点奇怪。
删除的网格项目位于右侧，并由其他列分隔。
问题：
为什么会这样呢？这是预期的行为还是我的代码中遗漏了某些东西？如何删除此列？
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
header {
grid-area: header;
background: lightblue;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: blue;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>13
推荐指数
推荐指数
2
解决办法
解决办法
436
查看次数
查看次数
minmax() 默认为 max
我尝试设置minmax()，grid-template-rows有趣的是，结果是网格行扩展到 的最大值minmax()而不是最小值。
我们怎样才能使网格行保持在最小声明大小，并且稍后如果添加更多内容 - 网格行将扩展到最大声明大小而不是更多？
这是一个例子：
body {
background: gray;
border: solid black 1px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: minmax(50px, 150px);
}
aside {
border-right: solid 1px red;
}
aside.homepage {
background: blue;
}<aside></aside>
<aside class="homepage">
<header></header>
<main></main>
<footer></footer>
</aside>
<aside></aside>7
推荐指数
推荐指数
2
解决办法
解决办法
2535
查看次数
查看次数