그리드 레이아웃(Grid Layout)이란?
CSS Grid(그리드)는 웹페이지의 요소들을 마치 체스판 같은 그리드 안에 배치하는 방법을 뜻합니다.
그리드는 가로줄과 세로줄이 겹치는 형태로, 이 겹치는 지점들에 웹페이지의 요소들을 넣을 수 있게 해줍니다.
그래서 웹페이지를 만들 때 여러 요소들을 가지고 마치 퍼즐 맞추듯이 페이지를 디자인할 수 있습니다.
예를 들어, 하나의 큰 이미지를 가로 2칸, 세로 2칸을 차지하게 하고, 그 옆에 작은 텍스트 요소를 놓을 수도 있고, 아래에는 세로로 긴 이미지를 놓을 수도 있습니다.
그리드를 사용하려면 먼저 그리드를 적용할 컨테이너(Container)에 display: grid;라는 코드를 적어주어야 합니다.
이렇게 하면 이 컨테이너는 그리드 컨테이너가 되고, 그 안에 있는 요소들은 그리드 아이템(Item)이 됩니다.
그리드의 칸 수는 grid-template-columns(세로)와 grid-template-rows(가로)라는 CSS 속성을 활용해 정할 수 있습니다.
예를 들어 grid-template-columns: repeat(3, 1fr);라고 쓰면 가로로 3개의 칸이 생기고, grid-template-rows: repeat(3, 1fr);라고 쓰면 세로로 3개의 칸이 생깁니다.
그리고 각 그리드 아이템에 grid-column와 grid-row라는 코드를 적용해, 각 아이템이 그리드의 어떤 부분을 차지할지 정할 수 있습니다.
예를 들어 grid-column: 1 / 3;인 아이템은 세로로 1번째 칸부터 3번째 칸 전까지 공간을 차지합니다.
같은 방식으로 grid-row: 1 / 3;인 아이템은 가로로 1번 칸부터 3번째 칸 전 까지 공간을 차지합니다.
마지막으로, 그리드 사이의 간격(gutter)은 grid-gap라는 속성으로 정할 수 있습니다.
예를 들어 grid-gap: 50px;은 인접한 가로 축, 세로 축 사이의 간격을 50px로 만듭니다.
grid-gap에 grid-gap: 50px 40px;과 같이 두 개의 치수를 부여하면 첫 번째 치수는 행(가로 줄, row) 사이의 간격을 50px로, 두 번째 치수는 열(세로 줄, column) 사이의 간격을 40px로 설정합니다.
이렇게 CSS Grid를 사용하면 복잡한 레이아웃도 쉽게 만들 수 있고, 더욱 효율적으로 웹페이지를 구성할 수 있습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!