[ HTML / CSS 공부 ] 5. Grid란?

[ 이전 글 보기 ]

https://includecoding.tistory.com/221

[ HTML / CSS 공부 ] 4. Flexbox란?

 

 

1. Grid 사용하기

.클래스 네임 {
	display: grid;
}

이렇게 사용하면, 해당 클래스 안에 들어오는 아이템들을 grid로써 사용할 수 있게 된다.

 

2. Grid의 속성들

 

2-1. grid-template-rows, grid-template-columns

- 컨테이너에 grid 트랙의 크기들을 지정해주는 속성으로, 뒤에 rows는 행의 배치 grid-columns는, 열의 배치를 뜻함.

만약 밑에와 같은 코드를 사용한다면?

grid-template-columns: 200px 200px 500px;

3개의 열을 배치하는 데, 대신에 1열은 200px의 크기 2열도 200px의 크기, 3열은 500px의 크기를 가진다고 생각하면 되고

1:1:1 비율로 만들고 싶다면 밑에 속성을 사용하면 된다.

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

fr은, fraction이란 단어의 줄임말로, 비율에 맞춰, 1:1:1 비율로 열을 생성한다는 의미를 뜻한다.

 

2-2. repeat(반복횟수, 크기) 함수

- repeat 함수는, 예를 들어 밑에처럼 코드를 작성한다면

grid-template-columns: repeat(5, 1fr);

grid-template-columns : 1fr 1fr 1fr 1fr 1fr과 같다고 생각하면 된다.

매개변수가 있는데, 첫 번째 매개변수는 반복횟수를 뜻하고, 두 번째 매개변수는 설정할 크기를 뜻한다.

 

2-3. minmax 함수(최소 크기, 최대 크기)

- 최소값과 최대값을 지정할 수 있는 함수로, minmax(100px, 200px) 이라면, 최소 무조건 100px은 넘어야 되고

100px이 넘어도, 200px 안쪽으로 늘려준다. 하지만, 200px은 넘어갈 수가 없다고 보면 된다.

 

2-4. auto-fill과 auto-fit

- 갯수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 아이템을 채우는 속성으로, 밑에 코드 처럼 작성을 하면

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

auto-fill 속성을 가지고, 크기는 부모의 속성의 20%만큼의 너비가 최소 너비고, 최소 너비보다 커지게 되면, 자동으로 키우게 된다.

하지만, 아이템의 갯수가 100/20 이면, 총 5개가 되어야, 딱 알맞게 붙을텐데, 만약 4개라면? 한 칸을 비워낼 수도 있다.

하지만, auto-fill이 아닌 auto-fit이라면?, 남는 공간을 비우는 것이 아니라 남는 공간을 채워버린다.

 

더 많은 속성들은, 밑에 링크를 참조하면, 잘 설명이 되어 있다. radio 버튼 클릭으로 해당 기능이 어떻게 동작되는 것인지도 알 수 있으니

한 번 글을 보면서 직접 작성해보는 것도 좋을 것이라고 생각이 된다.

 

https://studiomeal.com/archives/533

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

 

도움이 되셨기를 바라면서, 다른 글로 다시 돌아오도록 하겠습니다!  👋👋👋👋👋👋