相关疑难解决方法(0)
为什么具有网格区域名称但未在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
查看次数
查看次数
具有列顺序的响应式多列列表
我正在尝试创建一个有序的多列列表,但我正在努力与CSS网格布局规则.
期望的结果应该是敏感的.在小屏幕上2个网格列,在大屏幕上最多4个,同时保持列顺序.
而不是像这样订购:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
他们应该像这样订购:
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
我觉得我很接近这个小提琴.
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
grid-auto-flow: column;
grid-template-rows: repeat(5, 1em);
}
li {
outline: 1px solid orange;
}<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item …6
推荐指数
推荐指数
1
解决办法
解决办法
1037
查看次数
查看次数
是否可以通过 grid-template-columns 定义隐藏具有空内容的列？
我有一个包含两列的 CSS 网格。
我可能会也可能不会在第一列内呈现内容。换句话说，列 div 将始终存在，只是有时其中可能没有内容。
当第一列中没有内容时，我不希望该列占用空间，当有内容时，我希望它的最大宽度为100px。
是否可以单独通过 CSS 网格定义来做到这一点？
#container {
display: grid;
grid-template-columns: minmax(auto, 100px) auto;
grid-gap: 5px;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #c0c0c0;
}<div id="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
Placeat, rerum illo eligendi, hic eum magnam quo architecto necessitatibus sunt sequi repellendus suscipit fuga tenetur atque corrupti modi saepe! Iusto, provident.
</div>
</div>5
推荐指数
推荐指数
1
解决办法
解决办法
6635
查看次数
查看次数