본문 바로가기
[study]이론정리/HTML & CSS & JavaScript

CSS 5일차 - Grid(2) Gap, 정렬, auto-rows

by yoon9i 2024. 5. 2.

d. gap ( 간격 )
- can i use 에서 내가 사용하는 버전에서 지원해주는지 꼭 확인할것.

가. 행의 간격 
grid- row-gap: 10px

나. 열의 간격
grid-column-gap: 10px

축약표현식
문법:
grid-gap:   row-gap     column-gap;
grid-gap:   10px      20px

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>행과열간격-gap</title>
    <style type="text/css">
        .item-1 {
            background-color: antiquewhite;
        }

        .item-2 {
            background-color: red;
        }

        .item-3 {
            background-color: blue;
        }

        .item-4 {
            background-color: aqua;
        }

        .item-5 {
            background-color: skyblue;
        }

        .item-6 {
            background-color: purple;
        }


        .grid-container {
            height: 500px;
            margin: 20px;
            display: grid;

            grid-auto-flow: row;

            height: 500px;
            grid-template-columns: 50% 50%;
            /*
            height 값에 따라서 2행이 크기가 동적으로 변경.
            최대한 height 에 맞춰줌
            */
            grid-template-rows: 100px minmax(10px, 400px) 50px;



            /* grid-row-gap: 10px;
            grid-column-gap: 20px; */

            /* 축약표현식 */
            grid-gap: 10px 20px;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="item-1">item1</div>
        <div class="item-2">item2</div>
        <div class="item-3">item3</div>
        <div class="item-4">item4</div>
        <div class="item-5">item5</div>
        <div class="item-6">item6</div>
    </div>

</body>

</html>

 

e. container 내의 item 정렬

가. x 축 정렬
justify-items: flex-end | center | ..;

나. y 축 정렬
align-items: flex-end | center | ..; 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>셀안에서의 item 정렬</title>
    <style type="text/css">
        .item-1 {
            background-color: antiquewhite;
        }

        .item-2 {
            background-color: red;
        }

        .item-3 {
            background-color: blue;
        }

        .item-4 {
            background-color: aqua;
        }

        .item-5 {
            background-color: skyblue;
        }

        .item-6 {
            background-color: purple;
        }

        .grid-container {
            border: 3px solid red;
        }

        .grid-container {
            margin: 20px;
            display: grid;

            grid-auto-flow: row;

            height: 500px;
            grid-template-columns: 50% 50%;
            /*
            height 값에 따라서 2행이 크기가 동적으로 변경.
            최대한 height 에 맞춰줌
            */
            grid-template-rows: 100px minmax(10px, 400px) 50px;


            /* 셀안의 item x 축 정렬(배치) */
            justify-items: center;

            /* 셀안의 item y 축 정렬(배치) */
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="item-1">item1</div>
        <div class="item-2">item2</div>
        <div class="item-3">item3</div>
        <div class="item-4">item4</div>
        <div class="item-5">item5</div>
        <div class="item-6">item6</div>
    </div>

</body>

</html>

 


f. container 자체 정렬

가. x 축 정렬
justify-content: flex-end | center | ..;

나. y 축 정렬
align-content: flex-end | center | ..;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Container 자체정렬</title>
    <style type="text/css">
        .item-1 {
            background-color: antiquewhite;
        }

        .item-2 {
            background-color: red;
        }

        .item-3 {
            background-color: blue;
        }

        .item-4 {
            background-color: aqua;
        }

        .item-5 {
            background-color: skyblue;
        }

        .item-6 {
            background-color: purple;
        }

        .grid-container {
            border: 3px solid red;
        }

        .grid-container {
            margin: 20px;
            display: grid;

            grid-auto-flow: row;

            height: 1000px;
            grid-template-columns: 25% 25%;
            /*
            height 값에 따라서 2행이 크기가 동적으로 변경.
            최대한 height 에 맞춰줌
            */
            grid-template-rows: 100px minmax(10px, 400px) 50px;


            /* Conatainer 자신의 x 축 정렬(배치) */
            justify-content: flex-end;

            /* Conatainer 자신의 y 축 정렬(배치) */
            align-content: flex-end;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="item-1">item1</div>
        <div class="item-2">item2</div>
        <div class="item-3">item3</div>
        <div class="item-4">item4</div>
        <div class="item-5">item5</div>
        <div class="item-6">item6</div>
    </div>

</body>

</html>

 

g. 자동으로 row 추가
grid-auto-flow: row ( 기본 )
==> grid-template-rows: 값 값; 를 명시적으로 지정하지 않아도
       자동으로 row 로 추가된다.
==> 자동으로 추가되는 행의 height 는 item 이 가진 컨텐츠에 영향을 받아서 height 가 정해진다.
       이 height 값을 고정하자.

       gride-auto-rows: 값;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>자동으로 row 추가</title>
    <style type="text/css">
        .item-1 {
            background-color: antiquewhite;
        }

        .item-2 {
            background-color: red;
        }

        .item-3 {
            background-color: blue;
        }

        .item-4 {
            background-color: aqua;
        }

        .item-5 {
            background-color: skyblue;
        }

        .item-6 {
            background-color: purple;
        }

        .grid-container {
            border: 3px solid red;
        }

        .grid-container2 {
            border: 3px solid red;
        }

        .grid-container {
            margin: 20px;
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: 150px 150px;

            /* Conatainer 자신의 x 축 정렬(배치) */
            justify-content: center;
        }

        .grid-container2 {
            margin: 20px;
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: 150px 150px;

            /* Conatainer 자신의 x 축 정렬(배치) */
            justify-content: center;

            /* 
            row 값을 따로 정해주지 않으면 컨텐츠 크기만큼
            height 가 각각 변하는데 height 값을 고정해서
            모든 컨텐츠크기가 일정하게 설정한다. 
            */
            grid-auto-rows: 100px;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="item-1">
            item1 item1 item1 item1 item1 item1 item1
            item1 item1 item1 item1 item1 item1 item1
        </div>
        <div class="item-2">item2</div>
        <div class="item-3">item3</div>
        <div class="item-4">item4</div>
        <div class="item-5">item5 item5 item5 item5 item5 item5 item5</div>
        <div class="item-6">item6</div>
    </div>
    <hr>
    <div class="grid-container2">
        <div class="item-1">
            item1 item1 item1 item1 item1 item1 item1
            item1 item1 item1 item1 item1 item1 item1
        </div>
        <div class="item-2">item2</div>
        <div class="item-3">item3</div>
        <div class="item-4">item4</div>
        <div class="item-5">item5 item5 item5 item5 item5 item5 item5</div>
        <div class="item-6">item6</div>
    </div>

</body>

</html>

 

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

CSS 총정리  (2) 2024.05.02
CSS 5일차 - Grid(3) item 속성  (0) 2024.05.02
CSS 5일차 - Grid(1) 행 과 열  (0) 2024.05.02
CSS 5일차 - FlexBox(2)  (1) 2024.04.26
CSS 5일차 - 4일차 정리  (2) 2024.04.26

관련글

티스토리툴바