Item Flow 1부: CSS의 새로운 웹 구조 설정 방식

2 weeks ago 5

배경

오랜 시간이 흐르면서 Flexbox와 Grid 레이아웃은 CSS만으로 가능해졌으나,
Masonry 레이아웃은 아직까지도 JavaScript의 힘을 빌려야 했습니다. 이 레이아웃 때문에 브라우저 간 여러 논의가 진행되었습니다. Chrome은 새로운 레이아웃을 구현했고(display: masonry), Firefox와 Safari는 grid-template-*: collapse를 설정하는 방법으로 구현했습니다.

하지만 누군가가 기존과 아주 색다른 방안을 내놓았습니다. Masonry, Grid, Flexbox 레이아웃을 하나로 통합하자는 의견이었습니다.

Flexbox와 Grid의 흐름을 하나로

기존 내부 요소의 흐름을 설정하는 방법은 각 레이아웃마다 달랐습니다.

.container { /* Flexbox */ flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; /* flex-direction + flex-wrap */ flex-flow: <flex-direction> <flex-wrap>; /* Grid */ grid-auto-flow: row | column | dense; }

이 기능은 아래와 같은 기능으로 통합될 예정입니다.

item-direction
item-wrap
item-pack
item-slack

item-direction

내부 요소가 흐르는 방향을 정의합니다. flex-direction, grid-auto-flow 프로퍼티를 대신합니다.

.container { item-direction: row | row-reverse | column | column-reverse; }

item-wrap

내부 요소를 나열할 때 한 줄이 넘칠 시, 행동과 방향을 정의합니다. flex-wrap 프로퍼티를 대신합니다.

.container { item-wrap: auto || [[nowrap | wrap] | [normal | reverse]]; }

Grid 레이아웃은 기본적으로 wrap 방식이지만, item-wrap: nowrap으로 설정하면 모든 요소가 한 줄로만 나열되고, 너비까지 똑같은 레이아웃을 만들 수 있습니다.

item-pack

내부 요소를 쌓는 방법을 정의합니다. grid-auto-flow: dense 프로퍼티를 대신합니다.

.container { item-pack: normal | dense; }

Flexbox 레이아웃은 없었지만, item-pack: dense 기능이 생기면서 Grid처럼 똑같은 방식으로 쌓을 수 있습니다. 예를 들어서 기존 wrap 기능이 설정된 Flexbox는 요소를 쌓는 중, 한 줄의 공간이 요소의 너비보다 작을 때 무조건 다음 줄로 넘어가는 방식이었다면, 다음부턴 그 이전 줄에 해당 요소가 들어갈 수 있는 공간이 있으면, 그 곳에 먼저 넣는 방식으로 구현할 수 있습니다.

또한 기존에 없었던 새로운 방식도 추가할 수 있습니다.

item-pack: balance: text-wrap: balance처럼, 각 줄에 있는 요소의 개수를 다른 줄과 유사하게 맞출 수 있습니다.
item-pack: collapse: 최종 목표인 Masonry 레이아웃을 손쉽게 구현할 수 있습니다.

item-slack

내부 요소를 쌓으면서 한 줄마다 최소한 남길 여유 공간의 크기를 설정하는 프로퍼티입니다. 기존에 제안되었던 grid-slack, masonry-slack 프로퍼티를 대신합니다. item-slack의 이름은 아직 논의 중에 있습니다.(역자 주: 현재 flow-tolerance로 확정되었습니다.)