왜 필요한가

식물 목록에서 초보 정원사는 사진·빛·물주기를 비교합니다. 카드 크기가 다르면 일부 식물이 더 강조되고 정보 위치가 흔들립니다. 모든 사진의 원래 비율보다 동등한 비교가 중요합니다.

어떻게 해결하는가

정사각형 식물 사진 아래 같은 관리 항목 두 개를 둡니다. 밝은 햇빛을 고르면 로즈메리가 남고 전체를 고르면 세 식물이 돌아옵니다. 카드는 행 높이를 공유하고 좁은 화면에서는 읽는 순서로 쌓입니다.

식물 사진과 동일한 관리 항목 비교
초록 한 켠

우리 공간의 식물

모든 카드에서 같은 관리 항목을 비교하세요.

보스턴고사리

보스턴고사리

빛
간접광
물주기
촉촉함 유지
몬스테라

몬스테라

빛
간접광
물주기
표면이 마른 뒤
로즈메리

로즈메리

빛
밝은 햇빛
물주기
표면이 마른 뒤

표시 중: 3

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

균등 그리드는 같은 폭의 항목을 공통 행에 맞춥니다. 정보 구성이 비슷할 때 적합합니다. 글 길이가 다르면 빈 공간이 남으며 메이슨리는 정렬 대신 촘촘한 배치를 택합니다.

W3C: CSS Grid Level 1