CSS Grid 기본

사용 가능

1.1 Grid Layout의 기본 원칙

CSS Grid Layout은 복잡하고 적응력 있는 레이아웃을 만들기 위한 강력한 도구야. 이 도구는 개발자에게 요소 배치를 위한 2차원 그리드 시스템을 제공해서, 간단한 레이아웃은 물론 복잡한 레이아웃도 쉽게 만들 수 있어. CSS Grid의 기본 개념과 문법을 살펴보자, 특정 속성에 깊이 들어가지는 않을 거야.

CSS Grid의 기본 개념

  1. Grid 컨테이너와 Grid 요소들:
    • Grid 컨테이너display: grid를 포함하는 요소야. 이 요소는 그리드 컨테이너가 되고, 그 안에 있는 모든 자식 요소들은 Grid 요소가 돼
    • Grid 요소는 Grid 컨테이너의 직계 자식 요소들이야, 그리드 안에 배치되어 있어
  2. 그리드 축:
    • 주축 (inline axis)블록 축 (block axis): Grid는 요소 배치를 위한 두 개의 축을 지원해 — 주축과 블록 축. 기본적으로 주축은 수평으로 가고, 블록 축은 수직으로 가
  3. 그리드 셀 (Grid Cells):
    • 그리드 셀은 행과 열이 교차하는 곳에서 형성되는 기본 블록들이야. 각 Grid 요소는 하나 이상의 셀을 차지해
  4. 그리드 라인 (Grid Lines):
    • 그리드 라인은 행과 열을 구분하는 수평 및 수직선이야. 요소를 그리드에 상대적으로 배치하는 데 사용돼
  5. 그리드 영역 (Grid Areas):
    • 그리드 영역은 여러 셀을 결합하여 생성된 이름이 있는 그리드 영역이야. 셀을 그룹화하고 특정 영역에 요소를 배치할 수 있게 해줘

1.2 문법 요소들

CSS Grid의 기본 문법 요소들

1. Grid 컨테이너 생성:

.container {
  display: grid; /* 또는 display: inline-grid */
}

2. 그리드 구조 정의:

CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 서로 다른 너비의 세 열을 정의 */
  grid-template-rows: 50px 100px; /* 서로 다른 높이의 두 행을 정의 */
}

3. grid-area를 통한 셀 병합:

CSS
.item1 {
  grid-area: 1 / 1 / 2 / 4; /* 요소가 첫 번째 행과 처음 세 열을 차지 */
}

4. 요소 자동 배치:

CSS
.container {
  display: grid;
  grid-auto-rows: minmax(100px, auto); /* 행의 최소 높이를 지정 */
}

1.3 예제들

CSS Grid를 이용한 간단한 레이아웃:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 예제</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .item {
        background-color: lightblue;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

설명:

  • 컨테이너 .container는 첫 번째와 세 번째 열이 가용 공간의 동일한 비율을 차지하고 두 번째 열이 두 배를 차지하도록 설정돼
  • 고정된 높이의 두 개의 행이 지정돼
  • 속성 gap은 그리드 셀 간의 간격을 지정해
1
과제
Frontend SELF KO,  레벨 27레슨 0
잠금
그리드 컨테이너 만들기
그리드 컨테이너 만들기
1
과제
Frontend SELF KO,  레벨 27레슨 0
잠금
Grid 동작
Grid 동작
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다