CodeGym /행동 /Frontend SELF KO /CSS Grid 기본

CSS Grid 기본

Frontend SELF KO

레벨 27 , 레슨 0

사용 가능

1.1 Grid Layout의 기본 원칙

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

CSS Grid의 기본 개념

Grid 컨테이너와 Grid 요소들:
- Grid 컨테이너는 display: grid를 포함하는 요소야. 이 요소는 그리드 컨테이너가 되고, 그 안에 있는 모든 자식 요소들은 Grid 요소가 돼
- Grid 요소는 Grid 컨테이너의 직계 자식 요소들이야, 그리드 안에 배치되어 있어
그리드 축:
- 주축 (inline axis)와 블록 축 (block axis): Grid는 요소 배치를 위한 두 개의 축을 지원해 — 주축과 블록 축. 기본적으로 주축은 수평으로 가고, 블록 축은 수직으로 가
그리드 셀 (Grid Cells):
- 그리드 셀은 행과 열이 교차하는 곳에서 형성되는 기본 블록들이야. 각 Grid 요소는 하나 이상의 셀을 차지해
그리드 라인 (Grid Lines):
- 그리드 라인은 행과 열을 구분하는 수평 및 수직선이야. 요소를 그리드에 상대적으로 배치하는 데 사용돼
그리드 영역 (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은 그리드 셀 간의 간격을 지정해

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION