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