Grid의 기본과 형태

• flex : 한번에 한 방향의 레이아웃 (1차원) 
• grid : 한번에 두 방향(가로,세로) 레이아웃 (2차원)

Grid

flex보다 복잡한 레이아웃 표현이 가능

 

 

기본 구성

• Grid Container(그리드 컨테이너) : Grid의 전체 영역
• Grid Item(그리드 아이템) : Grid Container의 자식 영역

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

Grid 적용하기

.container {
	display:grid;
}

 

Grid 형태

• grid-template-columns
• gird-template-rows

직접 크기 설정 / auto

.container {
	display:grid;
    grid-template-columns:auto auto auto;
    grid-template-rows: 20px 40px 60px;
}

20px

40px

60px

20px

40px

60px

20px

40px

60px

 

grid-template-columns: 1fr 1fr 1fr;

❓fr 이란?

>> 비율로 이해!

>> 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 뜻

1

2

3

4

5

6

7

8

9

grid-template-columns: 100px 1fr 2fr;

>> 100px, 100px, 200px 로 column을 만든다는 의미입니다.

 

repeat 함수

>> 반복되는 값을 쉽게 처리

>> repeat(반복횟수, 값)

.container {
	grid-template-columns: repeat(3, 1fr);
	/* == grid-template-columns: 1fr 1fr 1fr */
}

minmax 함수

minmax(100px, auto)

내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 자동(auto)으로 늘어나도록 설정

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

1

Maybe it's hard to believe what's with my obvious charm and good looks but people used to think that I was a monster And for a long time, I believe them But after a while, you learn to ignore the names people calling you you just trust who you are.

3

4

5

6

7

8

9

 

auto-fill , auto-fit

>> column 갯수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채워줌

 

auto-fill

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

1

2

3

4

auto-fit

.container {
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

1

2

3

4