웹 애플리케이션을 빌드할 때 가장 먼저 필요한 것 중 하나는 앱의 콘텐츠를 배치하는 방법입니다.
많은 디자이너가 사이트이든 앱이든 가상의 그리드를 사용하여 콘텐츠를 배치합니다. CSS 그룹은 레이아웃을 더 쉽게 만들기 위해 열심히 노력하고 있으며, 이러한 노력의 일환으로 현재 브라우저에서 새롭게 부상하고 있는 CSS 그리드 레이아웃 모듈을 제작했습니다.
이 기능은 실험용 플래그로 Chrome에서 시험해 볼 수 있습니다. 버전 10부터 IE에도 구현되어 있으며 곧 대부분의 브라우저에서 지원될 예정입니다.
핵심 요약
- CSS 그리드 레이아웃을 사용하면 레이아웃의 행과 열을 정의할 수 있습니다.
- 사용 가능한 공간을 활용하도록 그리드 조정 가능
- 콘텐츠 순서는 그리드 컨테이너 표시 순서와 별개일 수 있습니다.
- 레이아웃이 미디어 쿼리에 따라 변경될 수 있으므로 반응형 디자인이 더 쉬워집니다.
- 콘텐츠가 겹칠 수 있음 (다른 방법으로는 불가능한 레이아웃 사용)
- 그리드 레이아웃 빠름
다음은 CSS 그리드 레이아웃의 작동 방식을 자세히 설명하는 개요 동영상입니다 (슬라이드는 여기 참고).
사용해 보기
이제 Chrome에서 CSS 그리드 레이아웃을 쉽게 사용할 수 있습니다. 가장 먼저 실험용 플래그를 사용 설정하여 기능을 사용 설정해야 합니다.
먼저 chrome://flags URL을 로드하고 아래와 같이 실험용 웹 플랫폼 기능 사용 옵션까지 아래로 스크롤합니다.
사용 설정을 클릭하여 플래그를 사용 설정하면 다음과 같은 브라우저를 다시 시작하라는 메시지가 표시됩니다.
이제 지금 다시 시작 버튼을 클릭하여 브라우저를 다시 시작하면 CSS 그리드 레이아웃을 사용해 볼 수 있습니다.
의견을 알려 주세요
CSS 그리드 레이아웃은 웹 콘텐츠를 위한 훌륭한 새 프리미티브이지만 평소와 같이 개발자들에 대한 여러분의 의견을 기다리고 있습니다. 의견을 제공하는 방법에는 여러 가지가 있습니다. 여기에 의견을 남기거나, 제목에 '[css-grid]'를 포함하여 W3C CSS Working Group 목록으로 메일을 보내거나, 버그를 기록하거나, 블로그를 통해 의견을 트윗하세요. 이 새롭고 매우 유용한 기능으로 여러분이 빌드하는 멋진 레이아웃을 기대하겠습니다.