(CSS) Grid란?

1. grid

• CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
  • Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있다.
• CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다
• 그리드는 수평선과 수직선이 교차해서 이루어진 집합체(행과 열)
• 하나의 집합체는 세로 열을 그리고 다른 하나는 가로 행을 정의
• 각 요소는 이러한 열과 행으로 된 라인을 따라 생성된 그리드에 배치할 수 있다.
• 픽셀 단위를 써서 트랙 크기가 고정된 그리드를 만들 수 있다.( 고정형(픽셀단위)레이아웃)
• 퍼센트 혹은 이런 목적에 접합하도록 설계된 새로은 fr단위의 가변크기를 지정해서 가변형 그리드를 만등 수 있다. (유연한 성질의 그리드)
• 미리 영역을 설정하고 (row, column)컨텐츠(요소)를 배치
• DB 데이터(리스트형 데이터)를 브라우저에 표시할 때 사용 → 쇼핑몰사이트 목록
• 태그가 아니고 특정영역을 지정하는 것이다.

2. 그리드 만들기

Grid실습페이지를 확인

3. grid Container속성

1) display

• 그리드 컨테이너(Container)를 정의
• 그리드를 사용하기 위해 컨테이너에 필수로 작성합니다

  값	의미
  grid	Block 특성의 Grid Container를 정의
  inline-grid	Inline 특성의 Grid Container를 정의

✅ fr이 뭘까?

• fr은 fraction숫자 비율대로 트랙의 크기를 나눈다.
• fraction → fr → grid사용 시 상대비율 → flex:1 상대비율
• auto → height:auto → 자식의 height값과 같다.
• minmax(최소(min), 최대(max)) → minmax(100px, auto) minmax(100px, 200px))

2) grid-template-rows

• 명시적 행(Track)의 크기를 정의
  • grid-template-rows: 100px 200px 300px 200px 100px;
• 동시에 라인(Line)의 이름도 정의할 수 있습니다.
• fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • grid-template-rows: 1fr 1fr 1fr 1fr;
• repeat() 함수를 사용할 수 있습니다.
• 각 라인은 행(Row, Track)과 열(Column, Track)의 개수대로 숫자(양수/음수) 라인 이름이 자동으로 지정되어 있어서, 꼭 필요한 경우가 아니면 라인 이름을 정의할 필요가 없습니다.

3) grid-template-columns

• 명시적 열(Track)의 크기를 정의한다.
  • grid-template-columns: 100px 200px 300px 200px 100px;
• 동시에 라인(Line)의 이름도 정의할 수 있다.
• fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • grid-template-columns: 1fr 1fr 1fr 1fr;
• repeat() 함수를 사용할 수 있다.
  • grid-template-columns: repeat(5, 1fr);

4) grid-template-areas

• 영역(Area) 이름을 참조해 템플릿 생성
• 지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.
• grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성입니다.

6) grid-template

• 행과 열을 한 번에 할 수 있다.
  • grid-template: rows/columns;
• grid-template-xxx의 단축 속성
• grid-template-rows, grid-template-columns 그리고 grid-template-areas의 단축 속성입니다.

7)row-gap(grid-row-gap)

• 행과 행 사이의 간격(Line)을 정의
• 각 행과 행 사이의 간격(Gutter)을 지정한다.
• 더 명확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현할 수 있습니다.

8)column-gap(grid-column-gap)

• 열과 열 사이의 간격(Line)을 정의
• 각 열과 열 사이의 간격(Gutter)을 지정한다.

9) gap(grid-gap)

• xxx-gap의 단축 속성
• 각 행과 행, 열과 열 사이의 간격(Gutter)을 지정한다.

10) grid-auto-rows

• 암시적 행(Track)의 크기를 정의한다,
• 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.
• grid-auto-rows → 설정한row 이외의 추가 row에 대한 설정
  • grid-auto-rows: minmax(auto, 150px);
  • html에서 <div class="item">item6</div> 이렇게 새롭게 추가하면 위의 설정으로 추가된다.

12) grid-auto-columns

• 암시적 열(Track)의 크기를 정의한다.
• 아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.
• grid-auto-columns → 설정한columns 이외의 추가 columns에 대한 설정
  • grid-auto-rows: minmax(auto, 120px);

13) grid-auto-flow

• 자동 배치 알고리즘 방식을 정의
• 배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의한다.
• 배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다.
• 표

  값	의미	기본값
  row	각 행 축을 따라 차례로 배치	row
  column	각 열 축을 따라 차례로 배치
  row dense(dense)	각 행 축을 따라 차례로 배치, 빈 영역 메움!
  column dense	각 열 축을 따라 차례로 배치, 빈 영역 메움!

14) grid

• grid-template-xxx과 grid-auto-xxx의 단축 속성
• grid-template-xxx과 grid-auto-xxx의 단축 속성이다.

15) align-content

• 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
• 그리드 콘텐츠(Contents)를 수직(열 축) 정렬한다.
• 그리드 콘텐츠의 세로 너비가 그리드 컨테이너(Container)보다 작아야 한다.
• 표

  값	의미	기본값
  normal	stretch와 같습니다.	normal
  start	시작점(위쪽) 정렬
  center	수직 가운데 정렬
  end	끝점(아래쪽) 정렬
  space-around	각 행 위아래에 여백을 고르게 정렬
  space-between	첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
  space-evenly	모든 여백을 고르게 정렬
  stretch	열 축을 채우기 위해 그리드 콘텐츠를 늘림

16) justify-content

• 그리드 콘텐츠를 수평(행 축) 정렬
• 그리드 콘텐츠(Contents)를 수평(행 축) 정렬한다.
• 그리드 콘텐츠의 가로 너비가 그리드 컨테이너(Container)보다 작아야 한다.
• 표

  값	의미	기본값
  normal	stretch와 같습니다.	normal
  start	시작점(왼쪽) 정렬
  center	수평 가운데 정렬
  end	끝점(오른쪽) 정렬
  space-around	각 열 좌우에 여백을 고르게 정렬
  space-between	첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
  space-evenly	모든 여백을 고르게 정렬
  stretch	행 축을 채우기 위해 그리드 콘텐츠를 늘림

17) place-content

• align-content와 justify-content의 단축 속성
• align-content와 justify-content의 단축 속성입니다.
• Edge(IE) 브라우저에서 지원하지 않는 속성입니다.

18) align-items

• 그리드 아이템(Items)들을 수직(열 축) 정렬
• 그리드 아이템(Items)들을 수직(열 축) 정렬합니다.
• 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 합니다.
• 표

  값	의미	기본값
  normal	stretch와 같습니다.	normal
  start	시작점(위쪽) 정렬
  center	수직 가운데 정렬
  end	끝점(아래쪽) 정렬
  stretch	열 축을 채우기 위해 그리드 아이템을 늘림

19) justify-items

• 그리드 아이템들을 수평(행 축) 정렬
• 그리드 아이템(Items)들을 수평(행 축) 정렬합니다.
• 그리드 아이템의 가로 너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 합니다.
• 표

  값	의미	기본값
  normal	stretch와 같습니다.	normal
  start	시작점(왼쪽) 정렬
  center	수평 가운데 정렬
  end	끝점(오른쪽) 정렬
  stretch	행 축을 채우기 위해 그리드 아이템을 늘림

20) place-items

• align-items와 justify-items의 단축 속성
• align-items와 justify-items의 단축 속성입니다.
• 하나의 값만 입력하면 두 속성에 모두 적용됩니다.

4. grid Item속성

• 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의됩니다.

1) grid-row-start

• 그리드 아이템(Item)의 행 시작 위치 지정
• grid-row-start: 시작번호

2) grid-row-end

• 그리드 아이템의 행 끝 위치 지정
• grid-row-end: 끝번호

3) grid-row

• grid-row-xxx의 단축 속성(행 시작/끝 위치)

4) grid-column-start

• 그리드 아이템의 열 시작 위치 지정
• grid-row-start: 시작번호
• 예시

  .grid_container .item:nth-child(1){
      background-color: red;
      grid-column-start: 1;
      grid-column-end: 6;
  }

  
  

5) grid-column-end

• 그리드 아이템의 열 끝 위치 지정

6) grid-column

• grid-column-xxx의 단축 속성(열 시작/끝 위치)
• 예시

  .grid_container .item:nth-child(2){
      background-color: orange;
      grid-column: 2/5;
      
  }

  
  

7) grid-area

• 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성

8) align-self

• 단일 그리드 아이템을 수직(열 축) 정렬

9) justify-self

• 단일 그리드 아이템을 수평(행 축) 정렬

10) place-self

• align-self와 justify-self의 단축 속성

11) order

• 그리드 아이템의 배치 순서를 지정

12) z-index

• 그리드 아이템의 쌓이는 순서를 지정

item에설정

row행번호

• grid-row-start: 시작번호
• grid-row-end: 끝번호
• grid-row: 시작번호/끝번호 (시작번호!~끝번호)

column열번호

• grid-column-start: 시작번호
• grid-column-end: 끝번호
• grid-column: 시작번호/끝번호 (시작번호~끝번호)

item에설정

row행번호

• grid-row-start: 시작번호
• grid-row-end: 끝번호
• grid-row: 시작번호/끝번호 (시작번호!~끝번호)

column열번호

• grid-column-start: 시작번호
• grid-column-end: 끝번호
• grid-column: 시작번호/끝번호 (시작번호~끝번호)