그리드 컨테이너가 행 대신 열을 채우도록 만들기

Question

<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>

Answer 1

필요에 따라 새 열을 생성하고 정의된 행이 없는 수직 유동 그리드의 경우 CSS 다중 열 레이아웃(예) 사용을 고려해 보세요. CSS 그리드 레이아웃(적어도 현재 구현 - 레벨 1)은 이 작업을 수행할 수 없습니다. 질문은 이것입니다:

CSS 그리드 레이아웃에서 grid-auto-flow 和 grid-template-rows / grid-template-columns 속성.

더 구체적으로 말하면, grid-auto-flow: row（默认设置）和grid-template-columnsgrid-auto-flow: row(기본값)와

grid-template-columns가 모두 정의되어 있으면 그리드 항목이 수평 방향으로 원활하게 흐를 수 있으며 다음과 같이 자동으로 새 행이 생성됩니다. 필요합니다. 이 개념은 질문의 코드에 설명되어 있습니다.

으아악 으아악

grid-template-rows그러나

grid-template-rows로 전환한 후에는 그리드 항목이 단일 열에 쌓입니다.

으아악 으아악

grid-auto-flow: row 和 grid-template-rows 不会自动创建列。必须定义grid-template-columns（因此，与grid-auto-flow

grid-auto-flow: row 및

grid-template-rows를 사용하면 열이 자동으로 생성되지 않습니다.

grid-template-columns는 정의되어야 합니다(따라서

grid-auto-flow와 역으로 관련됨).

으아악 으아악 grid-auto-flow:column和grid-template-rows

반대의 상황도 같은 행동을 합니다.

grid-auto-flow:column 및 grid-template-rows를 정의하면 그리드 항목이 수직 방향으로 원활하게 흐르고 필요에 따라 자동으로 새 열을 생성할 수 있습니다.

grid-template-columns

으아악 으아악

그런데 grid-template-columns로 전환하면 그리드 항목이 일렬로 쌓이게 됩니다. (이 질문을 포함하여 대부분의 사람들이 묻는 질문입니다.)

grid-template-rows

으아악 으아악

행은 자동으로 생성되지 않습니다. 이를 위해서는 grid-template-rows 정의가 필요합니다. (가장 일반적으로 제공되는 솔루션이지만 레이아웃의 행 수가 가변적이기 때문에 일반적으로 거부됩니다.)

으아악 으아악 🎜 🎜그러므로 위에서 언급한 🎜다중 열 레이아웃 솔루션🎜을 채택하는 것을 고려해 보세요. 🎜

사양 참조: 7.7. 자동 배치: grid-auto-flow 속성