꾸준한 개발자

계속적인 성장을 추구하는 개발자입니다. 꾸준함을 추구합니다.

계속 쓰는 개발 노트

CSS

Css Grid 속성

gold_dragon 2020. 6. 25. 18:53

아래 예시 코드로 공부 진행합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
        
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <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 class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

block 속성을 갖는 div 박스가 9개가 쌓여있다.

 

* display: grid;

grid container 박스를 정의해준다.

 

예시 코드에서 grid-container 클래스를 갖는 div 박스에 display: grid를 써주면 아무 변화가 없다.

 

하지만 grid-item 클래스를 갖는 div 박스들이 block요소가 아니라 inline-block 요소일 때, grid-container 클래스를 갖는 div 박스에 display: grid를 써주면 item들이 block요소로 쌓이게 된다.

* grid-template-columns

열의 개수와 넓이를 결정한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 200px 300px;
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <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 class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

.grid-container에 grid-template-columns: 200px 300px;을 부여하면 첫 번째 열이 200px이고 두 번째 열이 300px인 div 박스가 만들어진다.

 

grid-template-columns: 1fr 1fr 1fr이면 같은 1:1:1 비율로 3개의 열이 생겨난다. 그리고 1fr이 반복적으로 쓰이므로 grid-template-columns: repeat(3, 1fr)로 쓸 수 있다.

 

만약 grid-template-columns: repeat(3, 1fr 2fr 1fr)을 쓰면 1:2:1 비율로 3번 반복돼서 9개의 열이 나타난다.

* grid-template-rows

행의 개수와 높이를 정한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 200px 300px;
            grid-template-rows: 100px 100px 100px;
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <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 class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

.grid-container 박스에 grid-template-rows: 100px 100px 100px을 적용시키니까 3개의 행이 100px을 갖는 것을 볼 수 있다.

 

정의되지 않은 박스들은 기본 높이값을 갖는다.

 

grid-template-columns와 같이 repeat() 함수를 사용할 수 있다.

 

기본적으로 부모 container 박스 높이를 따라간다. 1fr 단위를 사용한 것과 같은 출력 모습이 나온다.

몇몇 item에 내용을 넣어보면 다음과 같다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 200px 300px;
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nam esse ad at dolore provident impedit ut a sapiente omnis.</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

높이의 최솟값과 최댓값을 넣을 수 있다.

 

* minmax()

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 200px 300px;
            grid-template-rows: repeat(3, minmax(100px, auto));
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nam esse ad at dolore provident impedit ut a sapiente omnis.</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

5번과 6번 셀을 보면 최솟값인 100px 높이가 유지되는 것을 볼 수 있고, 내용물이 100px 높이를 넘어가는 셀은 자동으로 내용물 높이로 유지되는 것을 볼 수 있다.

 

* auto-fill / auto-fit

repeat() 함수에서 열의 개수를 정해두지 않아도 정해진 넓이만큼 셀이 채워진다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20%, auto));
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nam esse ad at dolore provident impedit ut a sapiente omnis.</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

repeat() 함수에 숫자 대신 auto-fill을 사용해서 최소 넓이가 20% 박스들이 한 행에 5개가 들어간 것을 볼 수 있다.

 

미디어쿼리를 사용하지 않아도 반응형 페이지를 만들 수 있게 해 준다.

 

auto-fit도 auto-fill과 같은 역할을 하는데, 둘의 차이점은 다음과 같다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20%, auto));
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
    </div>
</body>
</html>

auto-fill은 부모의 공간이 남아도 각자 20% 넓이를 유지하지만,

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20%, auto));
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
    </div>
</body>
</html>

auto-fill은 부모의 공간이 남으면 남은 공간까지 채운다.

* row-gap / column-gap / gap

셀의 간격을 만들어준다.

 

예전에는 grid-gap이라고 쓰였었다.

 

기본값은 0이다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그리드 연습</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(20%, auto));
            row-gap: 10px;
        }

        .grid-item {
            border: 1px solid #000;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, libero!</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque error cupiditate nostrum ad dolorum soluta non maiores in dignissimos reprehenderit cumque voluptatibus, ducimus nihil, reiciendis quasi. Optio alias assumenda ratione?</div>
        <div class="grid-item">3</div>
        <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nam esse ad at dolore provident impedit ut a sapiente omnis.</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

row-gap으로 행의 간격이 10px 생겨난 것을 볼 수 있다.

 

위 사진은 row-gap 대신 column-gap: 10px을 준 사진이다.

 

gap은 행과 열, 둘 다 간격을 줄 수 있다.

* grid-auto-columns / grid-auto-rows

열과 행의 개수에 상관없이 모든 셀의 넓이와 높이를 정할 수 있다. (셀이 몇 개 생겨날지 모를 경우 사용)

* grid-column-start / grid-column-end / grid-column / grid-row-start / grid-row-end / grid-row

셀의 영역을 지정해준다.

 

grid-column과 grid-row는 축약형이다. (ex. grid-column: 1/3;)

 

grid-column: 3 / span 2;는 3번 열 3번 라인으로부터 2칸을 차지하겠다는 의미이다.

 

한 칸만 차지할 경우 end는 안 써줘도 된다.

* grid-template-areas

셀의 이름을 사용하여 영역을 지정할 수 있다.

 

각 item에 grid-area로 이름을 지정해준다.

* grid-auto-flow: row(기본) / column / dense / row dense / column dense;

grid-column: auto / span 3;을 사용하여 자동으로 셀이 채워질 때, 빈 공간을 채울 건지 빈 공간으로 둘 건지 정할 수 있다.

* align-items: stretch(기본) / start / center / end;

item들을 세로 방향으로 정렬한다.

* justify-items: stretch(기본) / start / center / end;

item들을 가로 방향으로 정렬한다.

* place-items

align-items와 justify-items를 같이 쓸 수 있는 축약형 속성이다.

 

속성을 하나만 쓰면 둘 다 적용이 된다.

* align-content: stretch(기본) / start / center / end / space-between / space-around / space-evenly

item들의 높이를 모두 합한 값이 컨테이너 높이보다 작을 때 item들을 통째로 세로 정렬한다.

 

셀 하나당 정렬되는 것이 아니라 컨테이너 안에서 item들이 통째로 정렬된다는 것이 특징이다.

* justify-content: stretch(기본) / start / center / end / space-between / space-around / space-evenly

item들을 통째로 가로 정렬한다.

* place-content

align-content와 justify-content를 같이 쓸 수 있는 축약형 속성이다.

* align-self: stretch(기본) / start / center / end;

item에 적용하는 속성으로 item 개별적으로 세로 정렬된다.

* justify-self: stretch(기본) / start / center / end;

item에 적용하는 속성으로 item 개별적으로 가로 정렬된다.

* place-self

align-self와 justify-self를 같이 쓸 수 있는 축약형 속성이다.

* order

item의 웹에서 보이는 순서를 정할 수 있다.

 

스크린 리더가 읽는 순서와 다를 수 있다.

* z-index

숫자가 클수록 위로 올라온다.

'CSS' 카테고리의 다른 글

CSS 우선순위  (0) 2020.07.14
CSS 선언 방법  (0) 2020.07.14
CSS 네이밍 케이스  (0) 2020.07.14
CSS3 Design  (0) 2020.07.14
Css Flex 속성  (0) 2020.06.23

'CSS'의 다른글

  • 현재글Css Grid 속성

관련글

댓글

티스토리툴바