在 CSS 网格中隐藏列
Hiding columns in CSS Grid
我是 css 网格的新手,我想弄清楚如何让一列完全消失并强制其他列堆叠。
我基本上希望下面的红色划掉的完全消失,只是将网格中的所有其他人堆叠成几行。
使用下面的代码,我希望 block 4
消失。然后我希望块 1/2/3/5/6 堆叠。
.wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(155px, 1fr)) 1fr;
grid-gap: 10px;
padding: 0.5rem;
}
<div class="wrapper">
<div>
Block 1
</div>
<div>
Block 2
</div>
<div>
Block 3
</div>
<div>
Block 4
</div>
<div>
Block 5
</div>
<div>
Block 6
</div>
</div>
它的代码笔:
确保每行只能有四个项目:
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;
每个项目的最小宽度为 20%,并且有一个网格间隙(任意长度),每行永远不会超过四个项目。
然后,隐藏每行第四项:
div:nth-child(4) { visibility: hidden; }
https://codepen.io/anon/pen/LeKzzx
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;
padding: 0.5rem;
}
.wrapper > div:nth-child(4) {
visibility: hidden;
}
.wrapper > div {
background-color: lightgreen;
}
<div class="wrapper">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
<div>Block 6</div>
</div>
grid-template-columns: repeat(3, minmax(155px, 1fr)) 0;
看不到宽度为 0 的内容。
例如,如果您想在悬停时看到它,只需重新定义 grid-template-columns。
.wrapper:hover {
grid-template-columns: repeat(3, minmax(155px, 1fr)) 1kebab; // 1 kebab being your new width.
}
我是 css 网格的新手,我想弄清楚如何让一列完全消失并强制其他列堆叠。
我基本上希望下面的红色划掉的完全消失,只是将网格中的所有其他人堆叠成几行。
使用下面的代码,我希望 block 4
消失。然后我希望块 1/2/3/5/6 堆叠。
.wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(155px, 1fr)) 1fr;
grid-gap: 10px;
padding: 0.5rem;
}
<div class="wrapper">
<div>
Block 1
</div>
<div>
Block 2
</div>
<div>
Block 3
</div>
<div>
Block 4
</div>
<div>
Block 5
</div>
<div>
Block 6
</div>
</div>
它的代码笔:
确保每行只能有四个项目:
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;
每个项目的最小宽度为 20%,并且有一个网格间隙(任意长度),每行永远不会超过四个项目。
然后,隐藏每行第四项:
div:nth-child(4) { visibility: hidden; }
https://codepen.io/anon/pen/LeKzzx
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;
padding: 0.5rem;
}
.wrapper > div:nth-child(4) {
visibility: hidden;
}
.wrapper > div {
background-color: lightgreen;
}
<div class="wrapper">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
<div>Block 6</div>
</div>
grid-template-columns: repeat(3, minmax(155px, 1fr)) 0;
看不到宽度为 0 的内容。
例如,如果您想在悬停时看到它,只需重新定义 grid-template-columns。
.wrapper:hover {
grid-template-columns: repeat(3, minmax(155px, 1fr)) 1kebab; // 1 kebab being your new width.
}