Flexbox와 Grid로 카드 간격 맞추기

사용할 도구

• 도구 열기: Flexbox·Grid 생성

3열·16px 간격부터 만들기

Grid·3열·1행·간격16·미리보기3을 고릅니다. repeat(3, minmax(0, 1fr))는 간격 제외 공간을 나눕니다. 내부960px에서 간격 두 개32px를 빼고928px를3등분하므로 33.333% 셋에 간격을 더하는 방식과 다릅니다.

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

항목5면 다음 행에2개, 열2면3행입니다. 행 수는 명시 트랙이지 항목 상한이 아닙니다. 딱 맞는3개뿐 아니라4·5개로 증가 시 흐름도 확인하세요.

Flexbox로 바꾸면 결정 대상이 달라짐

Flexbox는 row·column 방향과 두 축 정렬을 시험합니다. flex-wrap:wrap이 있어도 균등3열이 자동 생기지는 않고 자식 폭·flex-basis가 개수에 영향을 줍니다. 생성 CSS는 부모 배치이며 카드 전체 스타일을 대체하지 않습니다.

space-between은 남은 공간을 사이에 분배해 마지막 행2개가 멀리 벌어질 수 있습니다. 행 간 열 위치 정렬은 Grid, 자연 폭 도구 모음은 Flexbox를 고려하세요. 기술 신구보다 원하는 정렬 관계로 고르면 예외가 줄어듭니다.

짧은 샘플은 긴 내용 문제를 숨김

같은 상자가 맞으면 긴 제목·안 끊기는URL·이미지·두 줄 버튼으로 시험하세요. minmax(0, 1fr)는 트랙 축소 허용이지 자식 자동 줄바꿈 만능 설정이 아닙니다. 폭을 요구하는 내용을 찾아 해당 부분에 줄바꿈·내부 스크롤을 설정하세요.

align-items:stretch는 같은 행 외곽 높이를 맞추지만 내부 버튼 위치까지 자동 정렬하지 않습니다. 외곽과 내부 배치는 별개이므로 부모 트랙 확인 후 내부 세로 배치·여백을 조정하세요. 자식 문제를 부모 gap만으로 고치지 마세요.

3열 유지보다 읽을 수 있는 열 수

사이드바가 있으면1440px 화면도 카드 영역1440px는 아닙니다. 실제 부모 폭에서 글자·조작을 확인하고 좁으면2·1열로 설계하세요. 생성기는 전체 미디어 쿼리를 만들지 않으니 기본 CSS에 사이트 폭 조건을 통합해야 합니다.

글자·간격을 줄여3열 강제보다 세로 배치가 나을 수 있습니다.320px·확대·긴 번역에서 페이지 전체 가로 넘침을 보세요. 코드·표는 해당 영역에서 처리하고 열 변경을 정보 숨김과 혼동하지 마세요.

시각 순서와 읽기 순서 맞추기

row-reverse·column-reverse는 시각 배치를 바꿔도 문서 순서는 그대로일 수 있습니다. Tab·읽기 순서가 보이는 배치와 맞는지 확인하세요. 미관과 이해 가능한 조작 모두 필요하므로 큰 CSS 재정렬 전 원문 순서를 생각하세요.

3개 기본→5개 줄바꿈→실제 긴 내용→좁은 폭→키보드 순서로 시험하세요. 전부 동시에 바꾸면 원인을 모릅니다. 최소 배치부터 실제 조건을 하나씩 더하면 부모 폭·간격·자식 내용 문제를 나눌 수 있습니다.

같은 상자 대신 서로 다른 실제 내용을 넣기

세 열 미리보기가 맞으면 실제 구현에서 긴 제목, 큰 숫자, 여러 버튼을 넣어 보세요. 짧은 번호 상자는 줄바꿈과 높이 차이를 숨깁니다. 바깥 정렬이 카드 내부 버튼까지 자동 정렬하지는 않습니다. 생성 CSS는 외부 배치의 출발점이지 실제 카드 내용의 완성본이 아닙니다.

긴 URL이나 줄바꿈 없는 코드는 열 폭이 맞아도 넘칠 수 있습니다. overflow를 전부 숨기면 필요한 내용도 사라집니다. 일반 글은 줄바꿈하고 코드·표는 이름 붙은 내부 스크롤을 쓰되 페이지 전체가 가로로 넘치지 않는지 확인하세요. 짧은 샘플이 맞는다고 긴 사용자 입력도 맞는 것은 아닙니다.

넓은 화면, 사이드바 옆 실제 공간, 좁은 화면의 세로 배치, 글자 확대, 키보드 순서로 확인하세요. CSS 시각 순서가 Tab 순서와 달라질 수 있으므로 모든 조작에 도달하는지 봅니다. 간격과 열 수와 읽기 순서는 연결되어 있습니다. 선언을 붙이는 데서 끝내지 말고 실제 데이터 화면을 검사하세요.

참고 자료

• MDN — Grid and other layout methods (새 탭에서 열립니다)

사용할 도구

• Flexbox·Grid 생성