网格项目应该跨行流动,而不是列
grid items should flow across rows, not columns
我有一个包含 7 个动态大小 div 的网格,周围有 2 个块,这些块应该与 7 个动态 div 网格的第二行对齐。
我大部分时间都在使用它,只是网格的方向是列,而我希望它是行。参见 fiddle,1-7 应该越过顶部
https://jsfiddle.net/juzkxo20/5/
<div class='content'>
<div class='left'></div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
<div class='right'></div>
</div>
.content {
display: grid;
grid-template-columns: 1fr 7fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
grid-auto-flow: column;
}
.column-with-dynamic-content {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
grid-column: 2 / 3;
}
.left {
grid-column-start: 1;
grid-row: 2 / 3 ;
}
.right {
grid-column-end: -1;
grid-row: 2 / 3 ;
}
/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray; border: 1px solid gray; }
这是解决您问题的一种方法,我刚刚开始学习 css 网格,但我认为其中大部分是正确的。
您正在使用 .column-with-dynamic-content 创建一个包含 7 列的模板,但是,您在该容器中只有 3 个子 div,它正在寻找 7 个。您需要这个 class包含所有 7 个包含动态 div 的父 div。我在下面创建了一个 class 来向您展示。
.content {
display: grid;
grid-template-columns: 1fr 7fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
grid-auto-flow: column;
}
.column-with-dynamic-content {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.seven-children-column {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
grid-column: 2 / 3;
}
.left {
grid-column-start: 1;
grid-row: 2 / 3;
}
.right {
grid-column-end: -1;
grid-row: 2 / 3;
}
/* just demo styles */
.left,
.right {
border: 2px solid red;
}
.dynamic {
background-color: lightgray;
border: 1px solid gray;
}
<div class='content'>
<div class='left'></div>
<div class='seven-children-column'>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
</div>
<div class='right'></div>
</div>
网格提供line-based placement,允许您定义网格项的大小和位置。
.content,
.column-with-dynamic-content {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.content > div:nth-child(1) { grid-column: 1 / 2; grid-row: 2 / 3; }
.content > div:nth-child(2) { grid-column: 2 / 3; }
.content > div:nth-child(3) { grid-column: 3 / 4; }
.content > div:nth-child(4) { grid-column: 4 / 5; }
.content > div:nth-child(5) { grid-column: 5 / 6; }
.content > div:nth-child(6) { grid-column: 6 / 7; }
.content > div:nth-child(7) { grid-column: 7 / 8; }
.content > div:nth-child(8) { grid-column: 8 / 9; }
.content > div:nth-child(9) { grid-column: 9 / 10; grid-row: 2 / 3; }
/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray; border: 1px solid gray; }
<div class='content'>
<div class='left'></div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
<div class='right'></div>
</div>
jsFiddle demo
我有一个包含 7 个动态大小 div 的网格,周围有 2 个块,这些块应该与 7 个动态 div 网格的第二行对齐。
我大部分时间都在使用它,只是网格的方向是列,而我希望它是行。参见 fiddle,1-7 应该越过顶部 https://jsfiddle.net/juzkxo20/5/
<div class='content'>
<div class='left'></div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
<div class='right'></div>
</div>
.content {
display: grid;
grid-template-columns: 1fr 7fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
grid-auto-flow: column;
}
.column-with-dynamic-content {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
grid-column: 2 / 3;
}
.left {
grid-column-start: 1;
grid-row: 2 / 3 ;
}
.right {
grid-column-end: -1;
grid-row: 2 / 3 ;
}
/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray; border: 1px solid gray; }
这是解决您问题的一种方法,我刚刚开始学习 css 网格,但我认为其中大部分是正确的。
您正在使用 .column-with-dynamic-content 创建一个包含 7 列的模板,但是,您在该容器中只有 3 个子 div,它正在寻找 7 个。您需要这个 class包含所有 7 个包含动态 div 的父 div。我在下面创建了一个 class 来向您展示。
.content {
display: grid;
grid-template-columns: 1fr 7fr 1fr;
grid-auto-rows: 50px;
grid-gap: 10px;
grid-auto-flow: column;
}
.column-with-dynamic-content {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.seven-children-column {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
grid-column: 2 / 3;
}
.left {
grid-column-start: 1;
grid-row: 2 / 3;
}
.right {
grid-column-end: -1;
grid-row: 2 / 3;
}
/* just demo styles */
.left,
.right {
border: 2px solid red;
}
.dynamic {
background-color: lightgray;
border: 1px solid gray;
}
<div class='content'>
<div class='left'></div>
<div class='seven-children-column'>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
</div>
<div class='right'></div>
</div>
网格提供line-based placement,允许您定义网格项的大小和位置。
.content,
.column-with-dynamic-content {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
}
.content > div:nth-child(1) { grid-column: 1 / 2; grid-row: 2 / 3; }
.content > div:nth-child(2) { grid-column: 2 / 3; }
.content > div:nth-child(3) { grid-column: 3 / 4; }
.content > div:nth-child(4) { grid-column: 4 / 5; }
.content > div:nth-child(5) { grid-column: 5 / 6; }
.content > div:nth-child(6) { grid-column: 6 / 7; }
.content > div:nth-child(7) { grid-column: 7 / 8; }
.content > div:nth-child(8) { grid-column: 8 / 9; }
.content > div:nth-child(9) { grid-column: 9 / 10; grid-row: 2 / 3; }
/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray; border: 1px solid gray; }
<div class='content'>
<div class='left'></div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>1</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>2</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>3</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>4</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>5</div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>6</div>
<div class='dynamic'></div>
</div>
<div class='column-with-dynamic-content'>
<div class='dynamic'>7</div>
<div class='dynamic'></div>
</div>
<div class='right'></div>
</div>