Grid 기초

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 31번째.

CSS Grid는 행과 열을 사용하여 웹 페이지를 쉽게 만들 수 있게 해주는 레이아웃 시스템입니다. float이나 까다로운 포지셔닝 없이도 복잡하고 반응형인 레이아웃을 구축하는 데 유용하며, 모든 최신 브라우저에서 작동합니다.

그리드 컨테이너를 만들려면 display 속성을 사용하세요:

.container {
  display: grid;
}

grid-template-columns를 px 또는 fr 단위(분수)와 함께 사용하여 그리드의 열을 정의하세요:

/* 이 설정은 세 개의 열을 생성하며, 가운데 열이 나머지 두 열보다 두 배 더 많은 공간을 차지하게 합니다. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

grid-template-rows를 사용하여 행을 정의합니다. gap 속성을 사용하여 그리드 아이템 사이에 간격을 추가하세요.

/* 두 개의 행이 있는 그리드를 생성합니다: 첫 번째 행은 높이가 100px이고, 두 번째 행은 200px입니다. */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

grid-container라는 이름의 클래스에 대해 다음을 수행하는 CSS 규칙을 만드세요:

그리드를 생성하도록 display 속성을 설정합니다
fr 단위를 사용하여 너비가 동일한 세 개의 열을 생성합니다
두 개의 행을 생성합니다: 첫 번째 행은 150px 높이, 두 번째 행은 250px 높이입니다
모든 그리드 아이템 사이에 20px의 간격을 추가합니다

grid-container 클래스에 대한 CSS 코드만 작성하세요.

치트 시트

CSS Grid는 행과 열을 사용하여 웹 페이지를 만들기 위한 레이아웃 시스템입니다. 그리드 컨테이너를 만들려면 display: grid를 사용하세요:

.container {
  display: grid;
}

px 또는 fr 단위(분수)와 함께 grid-template-columns를 사용하여 열을 정의합니다:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 세 개의 열, 가운데 열은 두 배 넓음 */
}

grid-template-rows로 행을 정의하고 gap으로 간격을 추가합니다:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* 특정 높이를 가진 두 개의 행 */
  gap: 20px; /* 그리드 아이템 사이의 간격 */
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-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>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.