[CSS] Grid

김현주·2021년 12월 6일

목록 보기

13/18

grid

grid는 container(부모요소)와 item(자식요소)으로 구성된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid layout</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
        <div class="item">F</div>
    </div>
</body>
</html>

1. display: grid

container에 display:grid;를 설정하는 것으로 시작

.container {
  display: grid;
/* gird | inline-grid */
}

하지만 grid를 추가해도 아무런 변화가 없습니다.
inline-grid 같은 경우 inline-block과 같이 내용에 따라 공간이 차지한다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

행과 열에 대한 정의가 들어가야 grid가 적용된다.

2. grid-template-columns

grid-template-columns 속성으로 열의 개수와 폭을 지정한다.
기본값은 none, 열을 만들지 않는다.
속성값의 개수 = 열의 개수, 각 속성값 = 열너비

.container {
  display: grid;
  grid-template-columns: 150px 50% auto;
/* 속성값이 150px, 50%, auto 일 경우 3열이 만들어지고
  1열의 너비는 150px, 2열의 너비는 50%, 3열의 너비는 나머지공간 */
}

fr단위는 비율을 의미한다.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
/* 속성값이 1fr 2fr 3fr 이면 1:2:3의 비율로 3열이 만들어진다. */
}

3. grid-template-rows

grid-template-rows 속성으로 행의 높이를 정한다.
첫번째 값이 1행의 높이, 두번째값이 2행의 높이이다.
행의 높이가 지정되지 않은 경우에는 content 높이에 맞춰진다.

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

👩‍💻 참고) 행의 개수가 지정되지 않은 가변적인 상황이라면 grid-auto-rows를 사용

4. repeat

repeat는 반복되는 값을 편하게 넣을 수 있다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* 1fr을 3번 반복 = 1fr 1fr 1fr */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
}
/* 1fr 2fr 을 3번 반복 = 1fr 2fr 1fr 2fr 1fr 2fr */

5. grid-gap

① grid-row-gap

열 사이의 간격

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}

② grid-column-gap

행 사이의 간격

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 30px;
}

③ grid-gap

행과 열의 간격
첫번째 값은 행 사이의 간격, 두번째 값은 열 사이의 간격

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 30px;
/* grid-gap의 값이 하나이면 열과 행 모두 적용 된다. */
}