Grid Axis

CSS 그리드 레이아웃은 '행' 및 '열' 방향의 콘텐츠 레이아웃을 가능하게 하는 2차원 레이아웃을 표시하는 방법입니다. 따라서, 모든 그리드에는 '블록 또는 열 방향의 축' 또는 '인라인 또는 행 방향의 축'이라는 2개의 축이 있습니다.

이러한 축을 따라 상자 정렬 명세서 (en-US)에 정의된 속성을 사용하여 항목을 정렬하고 맞출 수 있습니다.

CSS에서 '블록 또는 열 방향의 축'은 텍스트 블록을 배치할 때 사용되는 축입니다. 두 개의 단락이 있고, 오른쪽에서 왼쪽으로, 위에서 아래로 흐르는 언어 방향으로 작업하는 경우 , 블록 축에서 하나가 다른 단락 아래에 배치됩니다.

CSS 그리드 레이아웃의 블록 축을 보여주는 다이어그램

'인라인 또는 행 방향의 축'은 블록 축을 가로질러 실행되며 일반 텍스트가 흐르는 방향입니다. 이것은 CSS 그리드 레이아웃의 행입니다.

CSS 그리드 레이아웃의 인라인 축을 보여주는 다이어그램

이러한 축의 물리적 방향은 문서의 쓰기 모드 (en-US)에 따라 변경될 수 있습니다.

같이 보기