개발 뜯기/HTML, CSS

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

디자인 지지(ZII) 2021. 9. 28. 19:40
반응형



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로 채울 때 사용
반응형