4.2 Grid 레이아웃

약 3분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

4.2 Grid 레이아웃

Grid 레이아웃은 복잡한 웹 페이지의 구조를 효율적으로 디자인하는 데 유용한 CSS 기능입니다. Grid를 사용하면 페이지의 콘텐츠를 2차원적으로 배치할 수 있으며, 다양한 화면 크기에 따라 반응형으로 조정할 수 있습니다. Grid 레이아웃의 주요 개념 및 속성을 이해하고, 이를 실전 프로젝트에 적용해보도록 하겠습니다.

Grid 레이아웃의 기본 구조

Grid 레이아웃은 CSS에서 display: grid;를 사용하여 컨테이너를 정의하고, 자식 요소들은 행(row)과 열(column)을 통해 배치됩니다. 예를 들어, 다음과 같은 기본적인 Grid 컨테이너를 구현할 수 있습니다.

예제 코드

다음은 기본적인 Grid 레이아웃의 예제입니다. 두 개의 열을 생성하여 내용을 배치하는 방법을 보여줍니다.

코드 css

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: lightblue;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
}

실습

위의 코드를 HTML 파일에 적용하여 실제 Grid 레이아웃을 시각적으로 확인해봅시다. HTML 구조는 다음과 같이 설정할 수 있습니다.

코드 html

<div class="grid-container">
  <div class="grid-item">아이템 1</div>
  <div class="grid-item">아이템 2</div>
  <div class="grid-item">아이템 3</div>
  <div class="grid-item">아이템 4</div>
</div>

4.2 Grid 레이아웃

4.2 Grid 레이아웃

Grid 레이아웃의 기본 구조

예제 코드

실습

댓글 0