[CSS] Grid

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

 

giFlex는 한 방향 레이아웃 시스템 (1차원)

Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

 

1. grid-template-rows, grid-template-colums 그리드 형태 정의

gird-template-colums : 200px 200px 500px

column을 200px, 200px, 500px로 지정

gird-template-colums : 1fr 1fr 1fr;

fr은 fraction(여기로) : 트랙의 크기를 나눈다. 3개의 column을 1:1:1비율로 만들겠다는 의미

 

 

2. repeat

: 반복되는 값을 자동으로 처리할  수 있는 함수'

• grid-tekmplate-colms : repeat(5, 1fr)
•  = grid-tekmplate-colms : 1fr 1fr 1fr 1fr 1fr

3. minmax

• minmax(100px, auto) => 최소한 100px, 최대는 자동으로(auto)늘어나게. 

.container{
	grid-template-columns : repeat(3, 1fr);
    gird-template-rows : repeat(3, minmax(100px, auto));
}

height을 100으로 지정했지만 lorem의 텍스트가 100을 넘어서 자동으로 높이가 증가

 

4. auto-fill, auto-fit

: column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

.container{
	gird-template: repeat(auto-fill, minmax(20%,auto);
}

 

 

5. row-gap, column-gap 그리드 셀 사이의 간격 조정

.container {
  grid-template-columns: repeat(auto-fill, minmax(20%, auto));
  grid-template-rows: repeat(3, minmax(100px, auto));
  }

 

 

6. grid-auto-columns, gird-auto-rows 그리드 형태를 자동으로 정의

: grid-template-colums의 통제를 벗어난 위치에 있는 트랙의 크기를 지정

 

 

7. 각 셀의 영역 지정

• gird-column-start
• grid-column-end
• grid-column
• grid-row-start
• gird-row-end
• grid-row