📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전

그리드 (grid)

중급CSS(옷)

💬 쉬운 뜻

요소들을 '가로줄과 세로줄(행·열)'이 있는 표·바둑판처럼 가지런히 배치하는 도구예요. 사물함이나 달력처럼 칸이 격자로 정해져 있어, 무엇을 넣어도 가로·세로 줄이 흐트러지지 않습니다. 한 방향(가로 또는 세로)으로만 줄 세우는 플렉스박스와 달리 그리드는 행과 열을 동시에 잡는 2차원 배치라, 사진 갤러리나 상품 목록처럼 '3칸씩 여러 줄'로 반듯하게 깔 때 강력해요.

⌨️ 이럴 땐 이렇게 입력

상품 카드를 한 줄에 3개씩, 격자(그리드)로 반듯하게 깔아줘. 화면이 좁아지면 2칸으로 줄여줘
사진 갤러리를 표처럼 가로·세로 줄 맞춰 격자(그리드)로 배열해줘. 칸 사이 간격은 살짝 띄워줘

🔮 AI가 이렇게 답하면 = 이런 뜻

"그리드(grid)로 3열 레이아웃을 만들었어요" = 요소들을 한 줄로 길게 늘어놓은 게 아니라, 행과 열이 맞물린 격자에 3칸씩 반듯하게 채워 넣었다는 뜻입니다.

➡️ 다음엔 이렇게

칸 수를 바꾸고 싶으면 "한 줄에 4칸으로 늘려줘", 화면이 좁을 때 깨지면 "모바일에선 2칸으로 줄여줘"라고 하세요. 칸 사이 간격이 어색하면 "칸 사이 간격 더 띄워줘". 반대로 한 줄(가로 한 방향)로만 세우고 싶으면 그리드 대신 "플렉스박스로 해줘"라고 요청하면 됩니다.

📖 사전에서 인터랙티브로 보기 → 전체 용어 목록

한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈