게시일: 2026년 1월 14일
Chrome 145부터 다단 레이아웃 수준 2 사양의 column-wrap 및 column-height 속성이 지원됩니다.
이러한 속성을 사용하면 블록 방향으로 열을 새 행에 래핑할 수 있습니다.
Chrome 145 이전에는 다중 열 컨테이너의 높이가 제한된 경우 사용 가능한 공간에 맞지 않는 콘텐츠가 인라인 방향으로 오버플로 열로 표시되었습니다. 이렇게 하면 웹에 가로 스크롤 막대가 생성됩니다.
column-height 및 column-wrap 속성을 사용하면 열 행의 높이를 설정하고 오버플로 열이 새 행으로 표시되도록 설정할 수 있습니다.
열의 새 행을 만들 수 있으면 사용자가 열을 읽기 위해 위아래로 스크롤해야 하거나 콘텐츠 양을 예측할 수 없는 상황에서 가로 스크롤바가 표시될 위험이 있는 현재 상황을 피할 수 있습니다.
또한 사용 가능한 뷰포트 높이를 채우는 열이 생성되는 블록 방향 캐러셀과 같은 패턴도 지원합니다. 다음 행의 열을 읽으려면 블록 방향으로 다음 화면으로 스크롤합니다.
명확한 읽기 환경 만들기
열이 여러 행으로 구성되어 있으면 독자가 여러 행이 있다는 것을 알지 못하고 간격을 건너뛰어 열을 따라 계속 읽는 등 명확하지 않은 읽기 환경이 발생할 수 있습니다. UI 디자인 시 고려해야 할 사항입니다. 곧 출시될 행 간격에 장식 추가 기능을 사용하면 이러한 시각적 차이를 만드는 데 도움이 되는 도구를 추가로 사용할 수 있습니다.
행 규칙은 곧 제공될 예정입니다.
다단 수준 1 사양에는 column-rule 스타일 지정 속성이 포함됩니다. 이 규칙은 열 사이의 간격에 배치됩니다. 행 규칙 스타일 지정 속성은 현재 개발자 트라이얼 중인 새로운 CSS 간격 장식 사양에 포함되어 있습니다. 이 기능이 안정화되면 그리드, 플렉스박스, 다중 열에 행 및 열 규칙을 추가할 수 있습니다.