행과 열을 동시에 사용하는 2차원 레이아웃을 만듭니다.
Grid 컨테이너는 열과 행의 track을 정의하고 item을 칸에 배치합니다. 카드 목록, 대시보드, 페이지 큰 영역처럼 두 축 정렬이 중요한 경우에 적합합니다.
이번 예제의 출발점은 display:grid; grid-template-columns:repeat(2,1fr);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 열을 3개로 바꾸고 item 배치를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
단순한 한 줄 버튼 정렬까지 모두 Grid로 만들 필요는 없습니다.
직접 바꿔보세요열을 3개로 바꾸고 item 배치를 확인하세요.