Part03 CSS - 03

     Grid

CSS Grid - Flexible Box는 단순한 1차원 레이아웃을 위한 기능이지만 Grid는 2차원의 레이아웃 시스템을 제공, Flex처럼 Container와 Item이라는 두가지 개념이 있음

Grid Container Properties

Grid Item Properties

Grid Containers

            display - Grid Container 정의, 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의 됨

                            grid                Block 특성의 Grid Container를 정의

                            inline-grid      Inline 특성의 Grid Container를 정의

            grid-template-rows - 명시적 행의 크기, 라인의 이름을 정의, fr(fraction, 공간 비율) 단위를 사용할 수 있음, repeat() 함수를 사용할 수 있음

            grid-template-columns - 명시적 열의 크기, 라인의 이름을 정의, fr(fraction, 공간 비율) 단위를 사용할 수 있음, repeat() 함수를 사용할 수 있음

        .container {
          grid-template-rows: 100px 200px;
          grid-template-columns: 100px 200px;
        }
        /*repeat*/
        .container {
          width: 400px;
          display: grid;
          grid-template-rows: repeat(3, 100px);
          grid-template-columns: repeat(3, 1fr);
        }

        /* 동시에 각 라인의 이름도 정의할 수 있습니다. */
        .container {
          grid-template-rows: [first] 100px [second] 200px [third];
        }
        /* 라인에 중복된 이름을 지정할 수 있습니다. */
        .container {
          grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
        }
        .container {
          grid-template-columns: repeat(4, 100px 200px 50px);
          /* grid-template-columns: 100px 200px 50px 100px 200px 50px 100px 200px 50px 100px 200px 50px; */
        }

            grid-template-areas - 지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성(.을 사용하면 빈공간을 표현할 수 있음)  

        .container {
          display: grid;
          grid-template-rows: repeat(3, 100px);
          grid-template-columns: repeat(3, 1fr);
          grid-template-areas:
            "header header header"
            "main main aside"
            "footer footer footer";
        }
        header { grid-area: header; }
        main   { grid-area: main;   }
        aside  { grid-area: aside;  }
        footer { grid-area: footer; }

    

            grid-template - grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성            

        .container {
          display: grid;
          grid-template-rows: repeat(4, 100px);
          grid-template-columns: repeat(3, 1fr);
          grid-template-areas:
            "header header header"
            "main . ."
            "main . aside"
            "footer footer footer";
        }
        .container {
          display: grid;
          grid-template:
            "header header header" 80px
            "main main aside" 350px
            "footer footer footer" 130px
            / 2fr 100px 1fr;
        }

            접두어 grid - grid-3종류는 grid를 사용하지 않지만 간혹 일부버전의 브라우저의 경우는 grid-를 써줘야함

            row-gap(grid-row-gap) - 각 행과 행 사이의 간격(Gutter)을 지정, 정확히는 그리드 선(Grid Line)의 크기를 지정

            column-gap(grid-column-gap) - 각 열과 열사이의 간격을 지정

            gap(grid-gap) - 행과 행, 열과 열 사이의 간격을 지정하는 단축 속성

        .container {
            row-gap: 30px;
            column-gap: 15px;
            /*같은거*/
            gap: 30px 15px;
        }

            grid-auto-rows - 암시적 행의 크기를 정의

            grid-auto-columns - 암시적 열의 크기를 정의

            grid-auto-flow - 배치하지 않은 아이템을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의 함, 배치한 아이템은 grid-area를 사용한 아이템을 의미

            grid - grid-template-xxx과 grid-auto-xxx의 단축 속성

        .container {
          grid: <grid-template>;
          grid: <grid-template-rows> / <grid-template-columns>;
          grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
          grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
        }
        
        .container {
          grid:
            "header header header" 80px
            "main main aside" 350px
            "footer footer footer" 130px
            / 2fr 100px 1fr;
        }
        .container {
          grid-template:
            "header header header" 80px
            "main main aside" 350px
            "footer footer footer" 130px
            / 2fr 100px 1fr;
        }
        .container {
          grid: 100px 200px / 1fr 2fr;
        }
        .container {
          grid-template-rows: 100px 200px;
          grid-template-columns: 1fr 2fr;
        }
        .container {
          grid: 100px 100px / auto-flow 150px;
        }
        .container {
          grid-template-row: 100px 100px;
          grid-auto-flow: column;
          grid-auto-columns: 150px;
        }
        .container {
          grid: auto-flow dense 150px / 100px 100px;
        }
        .container {
          grid-template-columns: 100px 100px;
          grid-auto-flow: row dense;
          grid-auto-rows: 150px;
        }

            align-content - 그리드 콘텐츠를 수직 정렬하고 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야함      

            justify-content - 그리드 콘텐츠를 수평 정렬, 그리드 컨텐츠의 가로 너비가 그리드 컨테이너보다 작아야 함

            align-items - 그리드 아이템들을 수직 정렬, 그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야함

            justify-items - 그리드 아이템들을 수평 정렬, 그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야함

Grid Items            

            grid-row - grid-row-start와 grid-row-end의 단축 속성

            grid-column - grid-column-start와 grid-column-end의 단축 속성

        .item:nth-child(1){
          grid-column: 1 / 3;
          /*확장 3만큼*/
          grid-row: 1 / span 3;
        }

            grid-area - grid-row-start, grid-column-start, grid-row-end, grid-column-end의 단축 속성, grid-template-areas가 참조할 영역 이름을 설정(grid-row와 grid-column 개념은 무시됨)

        .item{
          grid-row: 2 / 3;
          grid-column: span 2 / -1;
        }
        .item{
          /*<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end> */
          grid-area: 2 / span 2 / 3 / -1;
        }

            align-self - 단일 그리드 아이템을 수직 정렬, 그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야함

            justify-self - 단일 그리드 아이템을 수평 정렬, 그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 함

            order - 그리드 아이템이 자동배치되는 순서를 변경, 숫자가 작을수록 앞서 배치 됨

            z-index - 속성을 이용해 아이템이 쌓이는 순서를 변경

Grid Functions - 그리드에서 사용하는 함수들

            repeat() - 행/열의 크기 정의를 반복, '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용
            minmax - 행/열의 '최소/최대 크기/를 정의, 첫 번째 인수는 '최솟값'이고 두 번째 인수는  '최댓값'임, grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용
            fit-content - 행/열의 크기를 그리드 아이템이 포함하는 내용 크기에 맞춤, '내용의 최대 크기'를 인수로 사용

Grid Units - 그리드에서 사용하는 주요 단위들

            fr(fractional unit) - 사용 가능한 공간에 대한 비율

            min-content - 그리드 아이템이 조합하는 내용의 최소 크기를 의미(한글일 경우 word-break: keep-all; 써야함)

            max-content - 그리드 아이템이 포함하는 내용의 최대 크기

            auto-fill, auto-fit - 행열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정, repeat()함수와 같이 사용하며 행/열과 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용(반응형 그리드)

            auto-fill과 auto-fit의 차이 - 그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간이 있을 때 발생, auto-fill은 남는 공간을 그대로 유지, auto-fit은 남는 공간을 축소