<p>다음과 같이 그리드를 수직으로 채우고 싶습니다.</p>
<pre class="brush:php;toolbar:false;">1 4 7
2 5 8
3 6 9
... 임의 개수의 추가 행.</pre>
<p>대신 다음과 같이 가로로 채워집니다. </p>
<pre class="brush:php;toolbar:false;">1 2 3
4 5 6
7 8 9</pre>
<p><strong>행 개수가 아닌 그리드의 열 개수를 지정하고 싶습니다. </strong></p>
<p>인라인 CSS 스타일을 사용한 내 div의 모습은 다음과 같습니다. </p>
<p><br /></p>
<pre class="snippet-code-html lang-html Prettyprint-override"><code><div style="display:grid; Grid-template-columns:1fr 1fr 1fr;">
1
2
3
<div>4</div>
5
6
7
8
<div>9</div>
</div></code></pre>
<p><br /></p>
<p>그리드의 너비가 3열인 것이 중요하지만 항목이 행이 아닌 열을 채우도록 하고 싶습니다. CSS 그리드에서 이것이 가능합니까? 나는 이것을 https://css-tricks.com/snippets/css/complete-guide-grid/ 읽었지만 주문에 대해서는 아무 것도 볼 수 없습니다. </p>
<p>CSS Flexbox에는 <code>flex-direction</code>이 있는데 CSS Grid에도 비슷한 속성이 있지 않나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
필요에 따라 새 열을 생성하고 정의된 행이 없는 수직 유동 그리드의 경우 CSS 다중 열 레이아웃(예) 사용을 고려해 보세요. CSS 그리드 레이아웃(적어도 현재 구현 - 레벨 1)은 이 작업을 수행할 수 없습니다. 질문은 이것입니다:
CSS 그리드 레이아웃에서
grid-auto-flow和grid-template-rows/grid-template-columns 속성.더 구체적으로 말하면,
grid-template-columns가 모두 정의되어 있으면 그리드 항목이 수평 방향으로 원활하게 흐를 수 있으며 다음과 같이 자동으로 새 행이 생성됩니다. 필요합니다. 이 개념은 질문의 코드에 설명되어 있습니다.grid-auto-flow: row（默认设置）和grid-template-columnsgrid-auto-flow: row(기본값)와
grid-template-rows로 전환한 후에는 그리드 항목이 단일 열에 쌓입니다.grid-template-rows그러나
grid-auto-flow: row 및grid-auto-flow: row和grid-template-rows不会自动创建列。必须定义grid-template-columns（因此，与grid-auto-flowgrid-template-rows를 사용하면 열이 자동으로 생성되지 않습니다.
으아악 으아악
반대의 상황도 같은 행동을 합니다.grid-auto-flow:column和grid-template-rowsgrid-template-columns으아악 으아악
grid-template-rows으아악 으아악
으아악 으아악 🎜 🎜그러므로 위에서 언급한 🎜다중 열 레이아웃 솔루션🎜을 채택하는 것을 고려해 보세요. 🎜사양 참조: 7.7. 자동 배치:
grid-auto-flow속성