이전 글에서 Grid Container에 대하여 알아보았습니다. 지금부터는 Container의 자식 요소인 Item을 알아봅시다. 아이템의 시작/끝 위치 지정 기존의 코드를 다시 가져와, item들을 어떻게 조작할 수 있는지 알아봅시다. grid-row-start item의 행 시작의 라인 번호를 지정합니다. 이 때, 라인 번호는 사진처럼 개발자 도구에서 Grid를 키게 되면 직관적으로 보이게 되어 작업하는데 수월할 수 있습니다. 이 포스팅에서는 예시로 item-3(c라고 적혀있는 item)의 위치를 변경해보겠습니다. .item-3 { grid-row-start: 2; } grid-row-end 행 마지막의 라인 번호를 지정합니다. .item-3 { grid-row-end: 4; } 행 시작과 마지막 라..

Grid Container 1. 그리드 템플릿 그리드는 행과 열로 정해집니다. 행에 몇 개의 Item이 들어갈 지, 열에 몇 개의 Item이 들어갈 지 결정합니다. 이 때, 그리드 트랙이 정의됩니다. (그리드 트랙이란, 그리드에 그려진 두 라인 사이의 공간입니다.) 1-1. grid-template-rows .container { grid-template-row: 150px 150px; } 그리드의 행에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다. 1-2. grid-template-columns .container { grid-template-columns: 150px 150px 150px 150px; } 그리드의 열에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다. 응용하면 아래와 같습니다. A..

CSS Grid를 공부하면서 알게 된 정보들을 정리하는 글입니다. 들어가기에 앞서.. Grid란? Grid(그리드)란 수평선과 수직선이 교차에서 만들어진 집합체입니다. 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용합니다. 이전에는 파이어폭스의 개발자 모드에서만 그리드를 적용한 모습을 보여주어 설치가 필수적이었습니다. 하지만 2021년 6월경에 크롬 브라우저도 Grid와 Flex의 적용된 모습을 개발자 모드에서 보여주는 기능이 지원되었습니다. 따라서 본인이 편한 환경에서 구현하시면 될 것 같습니다. Grid의 장점 1) 고정 가능한 크기 그리드를 레이아웃에 맞게 원하는 크기로 만들 수 있습니다. 또한, 유연하게 크기를 설정할 수 있도록 fr이라는 단위를 사용해 그리드를 작성..