CSS 그리드 레이아웃의 기본 개념과 활용법 🎨

웹 페이지를 디자인할 때, 우리는 종종 여러 요소를 정렬하고 구성해야 합니다. CSS 그리드 레이아웃은 이러한 작업을 훨씬 쉽게 만들어주는 강력한 도구입니다. 이번 포스팅에서는 CSS 그리드의 기본 개념과 활용법을 쉽게 설명해보겠습니다.

CSS 그리드 레이아웃이란?

CSS 그리드 레이아웃(Grid Layout)은 웹 페이지의 2차원 레이아웃을 구성하기 위한 CSS 기술입니다. 이를 사용하면, 컨테이너 안의 아이템들을 행(row)과 열(column) 기반의 그리드 안에 배치할 수 있습니다.

그리드 시작하기

그리드를 사용하기 위해서는 먼저 그리드 컨테이너를 정의해야 합니다. 이는 display: grid; 속성을 사용하여 설정할 수 있습니다.

.container {
  display: grid;
}

이 코드는 .container 클래스를 가진 요소를 그리드 컨테이너로 만듭니다.

그리드 행과 열 정의하기

그리드 컨테이너 내에서 행과 열의 크기를 정의할 수 있습니다. grid-template-columns와 grid-template-rows 속성을 사용하여 각각의 크기를 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 100px;
}

이 코드는 두 개의 열과 두 개의 행을 가진 그리드를 생성합니다. 첫 번째 열의 너비는 100px, 두 번째 열의 너비는 200px입니다. 마찬가지로, 첫 번째 행의 높이는 50px, 두 번째 행의 높이는 100px입니다.

아이템 배치하기

그리드 아이템들은 grid-column과 grid-row 속성을 사용하여 특정 위치에 배치할 수 있습니다.

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

item1은 첫 번째 열의 첫 번째 행에 위치하고, item2는 두 번째 열에 걸쳐서 첫 번째와 두 번째 행에 걸쳐 위치합니다.

그리드 간격 조정하기

그리드 아이템 사이의 간격은 grid-gap 속성을 사용하여 조정할 수 있습니다. 이 속성은 행과 열 사이의 간격을 설정합니다.

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 100px;
  grid-gap: 10px;
}

이 코드는 행과 열 사이의 간격을 10px로 설정합니다.

CSS 그리드 레이아웃을 사용하면 웹 페이지의 레이아웃을 더욱 유연하고 간편하게 구성할 수 있습니다. 이 기초적인 개념들을 통해, 여러분도 멋진 웹 페이지를 디자인할 수 있을 것입니다. Happy coding! 🚀