CSS 그리드 레이아웃의 기초와 기본 개념 🖥️

웹 개발에 관심 있는 주니어 개발자 여러분, 오늘은 CSS 그리드 레이아웃에 대해 알아볼 거예요. CSS 그리드는 웹 페이지를 더욱 유연하고 쉽게 구성할 수 있는 강력한 레이아웃 시스템입니다. 복잡한 용어 없이 기본적인 개념부터 차근차근 알아보겠습니다.

CSS 그리드 레이아웃이란?

CSS 그리드 레이아웃은 웹 페이지를 행과 열로 구성된 그리드 형태로 만들 수 있게 해주는 CSS 기술입니다. 이를 통해 개발자는 웹 페이지의 레이아웃을 더욱 정밀하게 제어할 수 있습니다.

기본 용어

• 그리드 컨테이너(Grid Container): 그리드 레이아웃을 적용할 요소입니다.
• 그리드 아이템(Grid Item): 그리드 컨테이너 내부의 자식 요소들입니다.
• **행(Row)**과 열(Column): 그리드의 수평선과 수직선입니다.

시작하기

그리드 레이아웃을 사용하기 위해서는 먼저 그리드 컨테이너를 정의해야 합니다. 이를 위해 CSS의 display 속성을 grid로 설정합니다.

.container {
  display: grid;
}

이렇게 하면 .container 클래스를 가진 요소가 그리드 컨테이너가 됩니다.

그리드 행과 열 정의하기

그리드 컨테이너 내에서 행과 열을 정의하기 위해 grid-template-columns와 grid-template-rows 속성을 사용합니다.

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

위 코드는 3개의 열과 2개의 행을 가진 그리드를 만듭니다. 각 열은 100px, 각 행은 50px의 크기를 가집니다.

그리드 아이템 배치하기

그리드 아이템들은 자동으로 그리드 내에 배치됩니다. 하지만 특정 아이템을 특정 위치에 배치하고 싶다면 grid-column과 grid-row 속성을 사용할 수 있습니다.

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

위 코드는 .item1 클래스를 가진 요소를 첫 번째 행의 첫 번째 열부터 세 번째 열까지 차지하도록 합니다.

CSS 그리드는 이처럼 웹 페이지의 레이아웃을 쉽고 유연하게 만들어주는 강력한 도구입니다. 여러분도 이 기초적인 개념을 바탕으로 다양한 레이아웃을 시도해 보세요!