그리드
Grid Layout
상자들을 바둑판처럼 가로·세로 칸에 맞춰 배치하는 방법이에요.
💡 계란판처럼 칸이 정해져 있어 차곡차곡 들어가요.
👆 직접 눌러 보기
진짜로 동작해요. 눌러 보고 움직여 보세요.
1
2
3
4
5
6
7
8
9
10
11
12
CSSdisplay: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
🤖 AI에게 이렇게 말해 보세요
상품 카드를 그리드(Grid)로 배치해 줘. PC는 4칸, 태블릿은 2칸, 휴대폰은 1칸이고 칸 사이 간격은 20px로 해 줘.
핵심은 ‘Grid Layout’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
높이가 제각각인 사진을 빈틈없이 쌓는 핀터레스트 스타일은 '메이슨리(Masonry)' 레이아웃이라고 해요.
이럴 때 써요
- 상품 목록, 사진 갤러리처럼 여러 줄 여러 칸으로 놓을 때
이렇게도 불러요: 바둑판, 격자, 칸, 열, 갤러리, 메이슨리, masonry, 그리드 레이아웃