CSS Grid는 flex와 언제 다르게 쓸까

CSS Grid는 flex와 언제 다르게 쓸까에서 먼저 볼 부분

flex는 한 방향 정렬에 강하고, grid는 행과 열을 함께 다루는 2차원 배치에 강합니다. 레이아웃 목적에 따라 선택하면 됩니다.

flex는 메뉴, 버튼 묶음, 한 줄 정렬처럼 가로나 세로 한 방향 흐름을 다룰 때 편합니다. 요소 크기가 내용에 따라 유연하게 바뀌는 구조에 잘 맞습니다.

grid는 카드 목록, 갤러리, 대시보드처럼 행과 열을 동시에 생각해야 하는 레이아웃에 어울립니다. 열 개수와 간격을 명확히 정할 수 있어 전체 구조가 안정됩니다.

둘 중 하나가 더 좋은 도구라기보다 목적이 다릅니다. 한 줄 안에서 아이템을 정렬하는 문제라면 flex, 페이지 영역을 격자로 나누는 문제라면 grid부터 생각해보세요.

반응형에서는 grid-template-columns를 바꾸는 방식이 특히 직관적입니다. 데스크톱 3열, 태블릿 2열, 모바일 1열처럼 구조를 단계적으로 조정하기 쉽습니다.

카드 목록을 grid로 배치하기

.card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 720px) {
  .card-list { grid-template-columns: 1fr; }
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

CSS Grid는 flex와 언제 다르게 쓸까 비교 기준

잘못 작성했을 때 나타나는 흐름

CSS 글은 속성 하나만 외우기보다 부모 요소와 자식 요소의 관계를 같이 확인하는 방식으로 읽는 것이 좋습니다.

스타일이 적용되지 않을 때는 개발자 도구에서 어떤 규칙이 취소선 처리되는지 먼저 보면 원인을 빠르게 좁힐 수 있습니다.

모바일 화면에서는 고정 너비, 긴 코드, margin 조합이 문제를 만들기 쉬우므로 작은 화면 기준까지 함께 확인해야 합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 한 줄 정렬 문제인지 확인하기
• 행과 열이 모두 중요한지 확인하기
• 카드 목록이면 grid부터 고려하기
• 작은 화면에서 열 개수를 줄이기