使用 CSS 网格交错两行或更多行
Interlave two or more rows using CSS Grid
我想创建这样的布局:
test
test
test
data-0
data-1
data-2
test
test
test
data-3
data-4
data-5
但是下面的代码产生了这个:
test
test
test
test
test
test
data-0
data-1
data-2
data-3
data-4
data-5
此示例显示 3 列、2*2 行和 6 个项目的布局。在实践中,我想使用 10 列、auto*2 行和动态数量的项目。作为奖励,如果列的数量根据可用宽度进行调整,那就太棒了。问题似乎是溢出元素只是添加到具有给定名称的第一行,而不是具有给定名称的第一行非完整行。
当前使用 react 的实现:
const items = new Array(6)
.fill(undefined)
.map((e, i) => ({ title: "test", data: "data-" + i }));
const root = (
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, auto)",
gridTemplateRows: "repeat(2, [title] auto [data] auto)",
}}
>
{items.map((item, i) => (
<React.Fragment key={i}>
<div style={{ gridRow: "title" }}>{item.title}</div>
<div style={{ gridRow: "data" }}>{item.data}</div>
</React.Fragment>
))}
</div>
);
ReactDOM.render(root, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
您还需要一些 css 类,您需要使用第 n 个子选择器设置位置:
.container {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-auto-rows: 30px;
grid-auto-flow: column dense;
}
.title:nth-child(6n+3) {
grid-column: 2;
background-color: lightblue;
}
.data:nth-child(6n+4) {
grid-column: 2;
background-color: lightblue;
}
.title:nth-child(6n+5) {
grid-column: 3;
background-color: lightgreen;
}
.data:nth-child(6n) {
grid-column: 3;
background-color: lightgreen;
}
<div class="container">
<div class="title">title1</div>
<div class="data">data1</div>
<div class="title">title2</div>
<div class="data">data2</div>
<div class="title">title3</div>
<div class="data">data3</div>
<div class="title">title4</div>
<div class="data">data4</div>
<div class="title">title5</div>
<div class="data">data5</div>
<div class="title">title6</div>
<div class="data">data6</div>
<div class="title">title7</div>
<div class="data">data7</div>
<div class="title">title8</div>
<div class="data">data8</div>
<div class="title">title9</div>
<div class="data">data9</div>
<div class="title">title10</div>
<div class="data">data10</div>
<div class="title">title</div>
<div class="data">data</div>
<div class="title">title</div>
<div class="data">data</div>
</div>
有个短视频例子:Don't Wait to Use Subgrid for Better Card Layouts
所提供的卡片布局无需更改即可用于所需的用例。网格组件的行跨度为 2(而不是 3)。
在撰写此答案时,子网格功能仅适用于 firefox。其他主要浏览器的实施已经开始。作为解决方法,该视频建议在 grid-template-rows: subgrid;
.
之前使用 grid-template-rows: ...;
.table {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(2, auto auto);
gap: 1em;
}
.card {
display: grid;
grid-row: span 2;
gap: 0;
/* fallback for browsers that don't support subgrid with following behaviour:
1fr: title gets as much space as it needs
auto: data is assumed to be of fixed size
*/
grid-template-rows: 1fr auto;
/* enable subgrid */
grid-template-rows: subgrid;
}
.title {
background: lightblue;
}
<div class="table">
<div class="card"><div class="title">long<br />title-0</div><div class="data">data-0</div></div>
<div class="card"><div class="title">title-1</div><div class="data">data-1</div></div>
<div class="card"><div class="title">title-2</div><div class="data">data-2</div></div>
<div class="card"><div class="title">title-3</div><div class="data">data-3</div></div>
<div class="card"><div class="title">title-4</div><div class="data">data-4</div></div>
<div class="card"><div class="title">title-5</div><div class="data">data-5</div></div>
</div>
我想创建这样的布局:
test | test | test |
data-0 | data-1 | data-2 |
test | test | test |
data-3 | data-4 | data-5 |
但是下面的代码产生了这个:
test | test | test | test | test | test |
data-0 | data-1 | data-2 | data-3 | data-4 | data-5 |
此示例显示 3 列、2*2 行和 6 个项目的布局。在实践中,我想使用 10 列、auto*2 行和动态数量的项目。作为奖励,如果列的数量根据可用宽度进行调整,那就太棒了。问题似乎是溢出元素只是添加到具有给定名称的第一行,而不是具有给定名称的第一行非完整行。
当前使用 react 的实现:
const items = new Array(6)
.fill(undefined)
.map((e, i) => ({ title: "test", data: "data-" + i }));
const root = (
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, auto)",
gridTemplateRows: "repeat(2, [title] auto [data] auto)",
}}
>
{items.map((item, i) => (
<React.Fragment key={i}>
<div style={{ gridRow: "title" }}>{item.title}</div>
<div style={{ gridRow: "data" }}>{item.data}</div>
</React.Fragment>
))}
</div>
);
ReactDOM.render(root, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
您还需要一些 css 类,您需要使用第 n 个子选择器设置位置:
.container {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-auto-rows: 30px;
grid-auto-flow: column dense;
}
.title:nth-child(6n+3) {
grid-column: 2;
background-color: lightblue;
}
.data:nth-child(6n+4) {
grid-column: 2;
background-color: lightblue;
}
.title:nth-child(6n+5) {
grid-column: 3;
background-color: lightgreen;
}
.data:nth-child(6n) {
grid-column: 3;
background-color: lightgreen;
}
<div class="container">
<div class="title">title1</div>
<div class="data">data1</div>
<div class="title">title2</div>
<div class="data">data2</div>
<div class="title">title3</div>
<div class="data">data3</div>
<div class="title">title4</div>
<div class="data">data4</div>
<div class="title">title5</div>
<div class="data">data5</div>
<div class="title">title6</div>
<div class="data">data6</div>
<div class="title">title7</div>
<div class="data">data7</div>
<div class="title">title8</div>
<div class="data">data8</div>
<div class="title">title9</div>
<div class="data">data9</div>
<div class="title">title10</div>
<div class="data">data10</div>
<div class="title">title</div>
<div class="data">data</div>
<div class="title">title</div>
<div class="data">data</div>
</div>
有个短视频例子:Don't Wait to Use Subgrid for Better Card Layouts
所提供的卡片布局无需更改即可用于所需的用例。网格组件的行跨度为 2(而不是 3)。
在撰写此答案时,子网格功能仅适用于 firefox。其他主要浏览器的实施已经开始。作为解决方法,该视频建议在 grid-template-rows: subgrid;
.
grid-template-rows: ...;
.table {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(2, auto auto);
gap: 1em;
}
.card {
display: grid;
grid-row: span 2;
gap: 0;
/* fallback for browsers that don't support subgrid with following behaviour:
1fr: title gets as much space as it needs
auto: data is assumed to be of fixed size
*/
grid-template-rows: 1fr auto;
/* enable subgrid */
grid-template-rows: subgrid;
}
.title {
background: lightblue;
}
<div class="table">
<div class="card"><div class="title">long<br />title-0</div><div class="data">data-0</div></div>
<div class="card"><div class="title">title-1</div><div class="data">data-1</div></div>
<div class="card"><div class="title">title-2</div><div class="data">data-2</div></div>
<div class="card"><div class="title">title-3</div><div class="data">data-3</div></div>
<div class="card"><div class="title">title-4</div><div class="data">data-4</div></div>
<div class="card"><div class="title">title-5</div><div class="data">data-5</div></div>
</div>