[CSS 개념잡기] Grid 정복하기

8. Grid

 

1) grid

✔ grid의 개요

웹페이지를 위한 2차원 레이아웃 시스템이다.

• 행(row)과 열(column)이 존재함
• gutters(gap)

 

 

✔ container : display

• flex와 마찬가지로 외부 container와 내부 item이 있다.

 

 

✔ container : grid-template-rows, grid-template-columns

몇 개의 행, 열을 가질 것인지 설정한다.

• 단위 값을 명시 해줘야함
• 명시한 값의 개수만큼 자리 차지함
• fr : 대비되는 비율
• repeat(반복할 횟수 n, 값 명시) : 반복 함수

  .container {
  grid-template-rows: 1fr 1fr /* 2개의 행 */
  grid-template-columns: 100px 100px 50px /* 3개의 열 */
  }

 

 

✔ container : grid-template-areas

차지하는 cell의 자리를 만들어줌

• grid-area : 이름표 작성

.css {
  grid-template-areas:
  "hd hd hd hd ."
  "ma ma ma . sb"
  ". ft ft ft ft";
}

.header {
  grid-area: hd;
}
.main {
  grid-area: ma;
}
.sidebar {
  grid-area: sb;
}
.footer {
  grid-area: ft;
}

 

 

✔ container : row-gap, column-gap

행, 열의 간격(gutters)을 설정 한다.

• 지원하지 않는 브라우저 : grid-row-gap, grid-column-gap으로 작동

 

 

✔ container : grid-auto-rows, grid-auto-columns

템플릿을 넘어가는 아이템에 높이, 넓이를 명시한다.

• 템플릿을 명시적으로 작성을 하지 못했던 item들에 암시적으로 지정
• 템플릿을 넘어가는 아이템에만 적용된 것을 볼 수 있음

 

 

✔ container : grid-auto-flow

아이템이 어떤 형태로 흘러갈 지 지정한다.

• default : row
• 아이템이 자리를 찾아가는 흐름을 바꿈 

row : 행 방향
column : 열 방향
~ dense : 빈 영역에 다른 아이템이 차지함

 

 

✔ container : grid (shorthand)

1. 명시적 속성(외재적) : template
   • grid-template-rows
   • grid-template-columns
   • grid-template-areas
2. 암시적 속성(내재적) : auto (item들이 자리를 잡아야 볼 수 있음)
   • grid-auto-rows
   • grid-auto-columns
   • grid-auto-flow

앞이 row / 뒤가 column

 

 

✔ container : justify-content, align-content

전체 행, 열을 바꾼다.

• 전체 컨테이너를 기준으로 여러 아이템들을 어떻게 배치할 지 정함

 

 

✔ container : justify-items, align-items

한 틀 안에서 각각의 item들을 어떻게 배치할 지 정한다.

• 자기 자신의 width만큼 움직임

 

 

✔ item : grid-row, grid-column

inline, inline-end를 지정해서 그리드 내 영역을 차지하게 한다.

1   -4
2   -3
3   -2
4   -1

 

 

✔ item : grid-area

4가지 속성의 단축속성이다.

start / end 순이다.
row-start / column-start / row-end / column-end

• grid-templete-area로 불러와 사용 가능

 

 

✔ item : order

flex 또는 grid 컨테이너 안에서 현재 요소의 배치 순서를 지정한다.

• 정렬 순서는 오름차순이고 같은 값일 경우 소스 코드 순으로 정렬됨

 

 

✔ item : z-index

위치 지정 요소와 그 자손 또는 하위 flex item의 Z축 순서를 지정한다.

• 더 큰 z-index값을 가진 요소가 작은 값을 가진 요소를 덮음

 

 

✔ grid 단위 : fr, min-content, max-content

• fr : 가로, 세로를 비율에 따라 나눌 때 사용
• min,max-content : 제일 크거나 작은 요소의 크기만큼 최소, 최대 영역을 정함

 

 

✔ grid 단위 : auto-fill, auto-fit

• auto-fill : 함수 등을 이용해 row, column 개수를 유연하게 지정할 수 있음
  • 함수에 min, max 값을 넣으면 최소, 최대 길이를 지정할 수 있음
• auto-fit : 빈 공간 없이 전부 container로 채울 때 사용