Grid 자동 배치(auto-placement)

CSS Grid 자동 배치 때문에 순서가 바뀌는 이유 & Flex로 중앙 정렬한 이유
웹 레이아웃을 공부하다가 Grid랑 Flex를 같이 써봤는데, 재밌는 걸 알게됨.

Grid 쓸 때 순서가 바뀌는 이유?

Grid로 레이아웃을 만들다 보면 앞에 있는 요소의 위치를 바꿨는데, 뒤에 있던 요소들 위치도 바뀌는 경우가 생긴다.

❓왜 이런 현상이 생길까?

Grid의 자동 배치(auto-placement) 방식 때문

CSS Grid는 기본적으로 자동 배치 규칙을 따른다.
1. HTML에 적힌 순서대로 위에서 아래, 왼쪽에서 오른쪽 순으로 칸을 채운다.
2. 만약 앞에 있는 요소가 특정 위치를 직접 차지하면, 그 다음 요소들은 빈칸을 피해 다음 빈 공간으로 들어간다.

💡 그래서 앞쪽 요소의 레이아웃을 변경하면 뒤쪽 요소들의 자리도 자동으로 밀리고 바뀌어서, 결과적으로 화면에 보이는 순서까지 달라지는 것!

❓ 그럼 어떻게 해야 순서가 안 꼬일까

grid-area, grid-row, grid-column 등을 직접 다 지정하여 명확하게 위치를 지정해주는게 제일 확실한 방법이다.

⚠️ 자유로운 위치 지정 시, 문제점

HTML 순서와 시각적으로 보이는 순서가 다를 경우 웹 접근성(ex. 스크린 리더) 문제가 생길 수 있다는 점! 꼭 주의해야 한다.