그리드

• 보통 2줄 이상을 정렬할 때 사용
• 2차원 배열(행과 열)을 정렬

ex)

똑같은 카드들이 정렬할떄 주로 사용

display : grid;

grid-template-(columns/row):

• 열/행의 크기를 정의

auto auto auto auto auto

-auto로 자동으로 정의 auto5번이 들어가면 5열or 5행

    <style>
        div{
            border: 1px solid black;
        }
        .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
        }
        .item{
            width: 50px;
            height: 50px;
        }
    </style>

repeat(n, auto)

• n번 열 설정

        .container{
            display: grid;
            grid-template-columns: repeat(5,auto);
            justify-content: center;
            align-content: center;
            height: 200px;
            column-gap: 10px;
        }

fr

• 공간 비율로 사용 가능

        .container{
            display: grid;
            grid-template-columns: 2fr 8fr 2fr;
            justify-content: center;
            align-content: center;
            height: 200px;
            column-gap: 10px;
        }

px

        .container{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            justify-content: center;
            align-content: center;
            height: 200px;
            column-gap: 10px;
        }

px fr

        .container{
            display: grid;
            grid-template-columns: 100px 100px 1fr;
            justify-content: center;
            align-content: center;
            height: 200px;
            column-gap: 10px;
        }

juctify-contetnt : center;

  .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
        }

justify-items : center;

        .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-items: center;
            height: 200px;
        }
        .it

align-items : center;

  .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

align-content : center;

    .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
            align-content: center;
            height: 200px;
        }

gap : n px n px;

• 각 행과 열 사이에 공간 설정

     .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
            align-content: center;
            height: 200px;
            gap: 10px;
        }

row-gap : 10px;

        .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
            align-content: center;
            height: 200px;
            row-gap: 10px;
        }

column-gap : 10px;

        .container{
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            justify-content: center;
            align-content: center;
            height: 200px;
            column-gap: 10px;
        }

grid-(column/row)-start : n;

• 왼쪽에서 n번쨰 열의 시작 줄

grid-(column/row)-end : n;

• 왼쪽에서 n번째 열의 끝 줄

grid-area : a / b / c / d;

• grid-column과 gird-row를 합친 것
• a : row-start, b : column-start, c : row-end, d : columnd-end 순이다.