왜 필요한가
식물 목록에서 초보 정원사는 사진·빛·물주기를 비교합니다. 카드 크기가 다르면 일부 식물이 더 강조되고 정보 위치가 흔들립니다. 모든 사진의 원래 비율보다 동등한 비교가 중요합니다.
어떻게 해결하는가
정사각형 식물 사진 아래 같은 관리 항목 두 개를 둡니다. 밝은 햇빛을 고르면 로즈메리가 남고 전체를 고르면 세 식물이 돌아옵니다. 카드는 행 높이를 공유하고 좁은 화면에서는 읽는 순서로 쌓입니다.
식물 사진과 동일한 관리 항목 비교초록 한 켠우리 공간의 식물
모든 카드에서 같은 관리 항목을 비교하세요.
표시 중: 3
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
무엇이라 부르는가
균등 그리드는 같은 폭의 항목을 공통 행에 맞춥니다. 정보 구성이 비슷할 때 적합합니다. 글 길이가 다르면 빈 공간이 남으며 메이슨리는 정렬 대신 촘촘한 배치를 택합니다.
W3C: CSS Grid Level 1
더 깊이 살펴보기
선택해서 읽는 자료 · 개요 읽기 시간과 별도
01선택·비교
정보 항목이 같은 상품·인물·선택지 비교에 적합합니다. 글자 훑기는 리스트, 높이가 다른 사진은 메이슨리에 맞습니다. 내용이 다른데 높이를 고정해 정보를 자르지 마세요.
02응용 사례
식물 카드는 사진·이름·빛·물 메모를 같은 순서로 보여줍니다. 생성 사진과 간단한 관리 항목은 완전한 원예 안내가 아닙니다. 실제 품종과 장소에 맞는 조건을 확인해야 합니다.
03구현 참고·주의점
같은 크기의 트랙·일관된 사진 비율·내용 기반 행 높이를 씁니다. 한 열로 바뀌어도 라벨을 유지합니다. 필터로 숨긴 카드는 배치에서 빼되 남은 항목의 상대 순서를 지킵니다.
04근거
비교 요약
이어서 살펴보기
원본·수정 제안 ↗내 프로젝트에 적용하기
프로젝트를 처음 시작하나요? 설명을 입력해 첫 프롬프트를 준비하세요.
맞춤 프롬프트 만들기 →이미 외부 AI와 대화 중이라면 이 글의 링크와 내 프로젝트에 맞는 이유, 중요하게 보는 장단점을 전달하세요. 합의한 요구사항에 어떻게 적용할지 요청하세요.
이 글 링크: 균등 그리드
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.