논리적 속성을 이야기하기 전에 물리적 속성을 이야기해 보자.

웹에서의 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로의 방향을 갖는다. 이러한 기본 흐름을 토대로 콘텐츠를 구성하는 각 요소들에게 간격(margin)과 여백(padding)을 주거나 왼쪽(left), 상단(top), 오른쪽(right), 아래쪽(bottom) 위치를 설정한다.

하지만 콘텐츠의 흐름을 바꾼다면 이야기는 달라진다. 웹 콘텐츠에 사용되는 언어에 따라서 텍스트 흐름이 우에서 좌로, 위에서 아래로 흐를 수도 있다. 

다음 아래의 테스트 도구는 이러한 논리적 처리를 잘 보여주고 있다. grid 속성은 텍스트 흐름에 따라 레이아웃 배치를 변경해 준다.

블록 차원(block dimension), 인라인 차원(inline dimension)

콘텐츠가 화면에 배치되는 모습을 다음 아래와 같이 block(row), inline(column) 축으로 설명할 수 있다.

하지만 글쓰기 방향이 바뀐다면 위와 같은 축은 적절치 않다. 즉 세로 쓰기 방식으로 바뀐다면 이 두개의 축은 아래와 같이 서로 바뀌게 된다.

CSS3의 Grid Layout System은 논리적인 콘텐츠 흐름을 레이아웃 처리에 사용될 수 있도록 설계되었다.

논리적 흐름에 따른 속성의 필요성

논리적 관점에서 본다면 width와 height 속성은 맞지 않다. 그래서 block-size와 inline-size 속성을 사용한다. 또한 max-block-size, min-block-size, max-inline-size, min-inline-size 속성을 사용한다.

즉, 콘텐츠의 흐름이 좌에서 우로 채워지는 경우라면 block-size는 height를 의미하며 inline-size는 width를 의미한다. 반대로 콘텐츠의 흐름이 수직이라면 block-size는 width를 의미하며 inline-size는 height를 의미한다.

또한 물리적인 흐름에 따라 방향을 가지고 있는 속성들은 아래 일부 속성처럼 논리적 흐름에 맞는 속성으로 대체될 수 있다.

다음 아래의 테스트 도구를 통해 분석해 보면 논리적 처리와 물리적 처리의 차이를 확인할 수 있다.