CSS Grid 정리

참고 자료

그 외에 추가로 확인하면 좋은 블로그

<head>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            margin: 0;
        }
        .item{
            display:flex;
            justify-content: center;
            align-items: center;
            border:1px solid #181818;
            font-weight: 900;
            font-size:1.2rem;
        }
        .item1{
            background-color: #fff8d9;
        }
        .item2{
            background-color: #dfffd9;
        }
        .item3{
            background-color: #d9feff;
        }
        .item4{
            background-color: #dcd9ff;
        }
        .item5{
            background-color: #ffd9e1;
        }
        .container{
            display : grid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
        <div class="item item1">item6</div>
        <div class="item item2">item7</div>
        <div class="item item3">item8</div>
        <div class="item item4">item9</div>
        <div class="item item5">item10</div>
    </div>
</body>

이 코드 내에서 대충 용어들을 정리하자면,

Grid Container

<div class=”container”></div>, grid의 전체 영역

Grid Item

Grid Container의 자식 요소들로, <div class=”item”></div>

Grid Track

Grid의 Row나 Column

Grid Cel

Grid 한 칸을 의미하며, Item은 실제 html <div> 태그 요소를, Cell은 item 하나가 들어가는 가상의 칸(?)

Grid Line

Grid Cell을 구분하는 선

Grid Number

Grid Line의 각 번호

Grid Gap

Grid Cell 사이의 간격

Grid Area

Grid Line을 둘러싼 사각형 영역, Grid Cell의 집합

우선 기본 세팅을 이와 같이 해둔다.

display:grid만 설정하면 처음에는 마치 block을 사용한 것 처럼 보여진다.

Grid 부모 관점 속성

먼저, Grid Track의 크기들을 지정해주는 속성 grid-template-columns와 grid-template-rows에 값을 지정했다.

.container{
    display:grid;
    /* grid-template-columns: 100px 100px 100px 100px 100px; */
    grid-template-columns: repeat(5, 100px);
    /* 100px 100px 100px 100px 100px를 repeat(5, 100px)로 간단히 바꿔 쓸 수 있다. */
    grid-template-rows: 100px 200px repeat(2, 100px);
}

이렇게 정적인 px 값이 아닌 반응형으로 지정하고 싶다면

.container{
    display:grid;
    grid-template-columns: repeat(5, 20%);
    /*또는 grid-template-columns: repeat(5, 1fr) 로 지정해도 된다.*/
    grid-auto-rows : 150px; /* 자동으로 행의 높이를 150px로 맞춰줌 */
}

이 때 grid-auto-rows : 150px; 의 코드는 cell 내부 내용이 너무 많아 넘치게 되면 잘려서 보이지 않게 되는데, 이를 유동적으로 알아서 맞춰주는 코드는 다음과 같다.

.container{
    display:grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-rows : minmax(150px, auto);
}

각 cell 사이의 간격을 주고 싶다면 다음과 같다.

grid-gap으로 row와 column 모두에게 설정을 할 수도 있으며, grid-column-gap 이나 grid-row-gap으로 둘 중 하나에만 설정할 수도 있다.

.container{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows : 150px;
    grid-gap : 10px;
}

Grid 자식 관점 속성

이번에는 각 셀의 영역을 지정할 것이다.

<div class="container">
    <div class="item item1">item1</div>
    <div class="item item2 grid2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
    <div class="item item1">item6</div>
    <div class="item item2">item7</div>
    <div class="item item3">item8</div>
    <div class="item item4">item9</div>
    <div class="item item5">item10</div>
</div>

변화를 주기 위해 grid2 클래스를 추가했다.

grid 클래스는 지금 column 2번과 3번 사이에 껴있는 셈이 된다.

이 때 이 column을 위에 있는 우측 이미지처럼 5번까지 확장시키고 싶다면, 다음과 같이 작성하면 된다.

.grid2 {
    grid-column-start : 2;
    grid-column-end : 5;
}

row를 설정하는 방법도 마찬가지다.

1번부터 2번까지 차지하고 있는 row를 1번부터 3번까지로 늘리고 싶다면 다음과 같이 작성할 수 있다.

.grid2 {
    grid-column-start : 2;
    grid-column-end : 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

이 때 위의 4줄의 코드를 간단하게 2줄로 바꿀 수가 있다.

.grid2 {
    grid-column : 2/5;
    /* 또는 grid-column: 2 / span 3; 을 작성하여 세 칸을 사용한다고 작성할 수도 있다*/
    /* grid-colum: 2/-1; 은 -1(즉 맨 마지막 줄)까지 사용한다는 뜻이다.*/
    grid-row: 1/3;
}

Grid Areas

이번엔 이미지 코드를 사용하셔서 그냥 예제에 올라와 있는 코드를 보며 확인해보기로 했다.

css-study > css-grid-main > video_code > image.html, image.css 확인

지금은 벌써 새벽 2시가 다 됐으므로... 내일 한번 grid를 이용해 간단한 웹페이지 하나를 만들어 볼 생각이다.

'html, css' 카테고리의 다른 글

마진 겹침 현상(margin collapsing) (0)	2025.03.10
Flex vs Grid (0)	2025.03.05
코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap (0)	2022.05.16
코누나님 - HTML, CSS / chapter 6 - Spotify 웹사이트 만들기 (0)	2022.05.15
코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법 (0)	2022.02.16

hykim

CSS Grid 정리

Grid 부모 관점 속성

Grid 자식 관점 속성

Grid Areas

'html, css' 카테고리의 다른 글

티스토리툴바

CSS Grid 정리

Grid 부모 관점 속성

Grid 자식 관점 속성

Grid Areas

'html, css' 카테고리의 다른 글

'html, css' Related Articles

티스토리툴바