CSS 그리드(CSS Grid)
CSS 그리드(CSS Grid)
CSS 그리드는 CSS에서 2차원적인 열과 행을 통제하는 레이아웃을 만들 때 사용하며 이는 플렉스박스의 핵심이론을 따른다.
display: grid
‘display: grid;’ 입력 시, 개발도구에서 ‘grid’ 옵션이 활성화 된 것을 볼 수 있으며 행과 열을 세는 숫자들이 레이아웃으로 나타난다.
예를 들어,
main ul {
display: grid;
}
와 같이 나타낼 수 있다.
gird-template-columns
‘gird-template-columns’ 입력 시, 그리드 안에 있는 구체적인 열의 수를 사전 정의할 수 있게 한다.
(’gird-tamplaate-columns: 400px 400px;’ 입력 시, 두 개의 열이 400px로 나타난다.)
그러나, 보편적으로 CSS 그리드를 이용할 때에는 ‘픽셀(px)’이 아닌 ‘프랙션(fractions)’을 이용하며 이는 특정 열에 적용해줄 그리드 내에 사용 가능한 영역의 공간을 정한다.
예를 들어,
main ul {
display: grid;
gird-tembpate-columns: 2fr 1fr;
}
와 같이 나타낼 수 있으며, 이는 전체 넓이가 3fr이고 3fr의 넓이 중 첫번 째 열이 2fr, 두번째 열이 1fr의 공간을 차지한다는 것을 나타낸다.
gap
맨 앞 행과 맨 앞 열의 틈을 정하는 명령어이며
예를 들면
main ul {
display: grid;
gird-tembpate-columns: 2fr 1fr;
gap: 100px 200px;
}
와 같이 나타날 수 있으며, 100px만큼의 행이 벌어지고 200px만큼의 열이 벌어지게 된다.
li:nth-of-type
그리드 컨테이너 안에 해당하는 번호를 지정하는 명령어이며
예를 들면,
li:nth-of-type(3) {
}
와 같이 나타난다.
(’li:nth-of-type(3))’ 입력 시, 3번째에 해당하는 목록이 지정된다.)
grid-column
요소가 차지하는 열의 수를 지정하는 명령어이다.
예를 들면,
li:nth-of-type(3) {
grid-column: 1 / span 2;
}
와 같이 나타나고 해당 목록이 차지하는 열에서부터 2개의 요소에 해당하는 공간을 차지한다.