minstudio

Grid

바둑판 같은 2차원 배치, CSS Grid

Flexbox가 한 줄(1차원) 정렬에 특화되어 있다면, Grid는 행(Row)과 열(Column)을 동시에 제어하는 강력한 2차원 레이아웃 시스템입니다. 부모 요소에 Grid 속성을 부여하여 뼈대를 만들 수 있습니다.

부모 컨테이너 속성 기능 설명
display: grid 그리드 레이아웃을 활성화합니다. (Block 요소처럼 한 줄을 다 차지함)
grid-template-columns 세로 열(Column)의 너비와 개수를 정의합니다.
예: 1fr 2fr 1fr (비율 분할), repeat(3, 100px) (반복)
grid-template-rows 가로 행(Row)의 높이를 정의합니다. (지정하지 않으면 콘텐츠 크기만큼 자동 설정됨)
gap 그리드 셀(아이템) 사이의 간격(여백)을 지정합니다.
(row-gap과 column-gap을 따로 줄 수도 있습니다)
justify-items / align-items 각각의 셀 내부에서 자식 요소들의 가로/세로 정렬을 결정합니다. (기본값: stretch)
justify-content / align-content 그리드 전체 덩어리를 컨테이너 안에서 가로/세로로 어떻게 정렬할지 결정합니다.
심화 학습

CSS Grid 심화 (칸 병합과 자유로운 배치)

엑셀에서 "셀 병합"을 하듯이 복잡한 대시보드나 사진 갤러리를 만들 때 마법처럼 작동합니다.

Grid의 보이지 않는 선(Line) 넘버링

선 1
선 2
선 3
선 4
줄 1
줄 2
줄 3
1칸
1칸
1칸
1칸
1칸
1칸

칸이 3개라면 기준이 되는 세로선(Line)은 4개가 생깁니다.
grid-column: 1 / 4;는 1번 세로선부터 4번 세로선까지 가로로 쭉 병합하라는 뜻입니다!
마찬가지로 grid-row: 2 / 4;는 2번 가로줄부터 4번 가로줄까지 세로로 쭉 병합하라는 뜻입니다.

선 번호 대신 '칸 수'로 병합하기 (span)

복잡한 선 번호를 계산하기 번거롭다면 span 키워드를 사용할 수 있습니다.
예를 들어 grid-column: span 2;를 적용하면 시작 선 번호와 상관없이 현재 위치에서부터 가로로 2칸을 병합하게 되어 훨씬 편리합니다.

grid-template-areas (이름으로 구역 나누기)

각 구역에 이름표(grid-area)를 달아주면, 마치 퍼즐을 맞추듯 작성한 문자열 모양 그대로 레이아웃이 완성됩니다.

CSS
grid-template-areas:
  "header header header"
  "sidebar content nav"
  "footer footer footer";
➡
header
sidebar
content
nav
footer

💡 눈으로 보는 CSS 코드의 단어 배치가 곧 실제 브라우저 상의 레이아웃이 됩니다! 

<div class="grid-container">
  <div class="grid-item">1fr</div>
  <div class="grid-item">2fr (더 넓음)</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">아래로 자동</div>
  <div class="grid-item">배치됩니다</div>
</div>
<!-- ====== CSS Grid 심화 (칸 병합과 자유로운 배치) ====== -->
<div style="margin: 30px 0; border-top: 1px solid #475569;"></div>
<style>
/* grid-template-areas를 활용한 완벽한 레이아웃 */
.grid-container-adv {
    display: grid; /* 그리드 레이아웃을 활성화합니다. */
    grid-template-columns: 1fr 2fr 1fr; /* 열 너비/개수 (값: px, %, fr, repeat(), minmax(), auto-fill) */
    grid-template-rows: 60px 150px 60px; /* 행 높이 (값: px, %, fr, repeat(), minmax(), auto) */
    grid-template-areas:
        "header header header"
        "sidebar content nav"
        "footer footer footer";
    gap: 10px; /* 셀 사이 여백 (예: 10px, 1rem) */
    justify-items: stretch; /* 자식 요소 가로 정렬 (값: start, end, center, stretch) */
    align-items: stretch; /* 자식 요소 세로 정렬 (값: start, end, center, stretch) */
    justify-content: start; /* 그리드 전체 가로 정렬 (값: start, end, center, space-between, space-around, space-evenly) */
    align-content: start; /* 그리드 전체 세로 정렬 (값: start, end, center, space-between, space-around, space-evenly, stretch) */
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
}

/* 각 요소에 이름표(grid-area)를 부여합니다 */
.item-header  { grid-area: header;  background: #f43f5e; }
.item-sidebar { grid-area: sidebar; background: #8b5cf6; }
.item-content { grid-area: content; background: #14b8a6; }
.item-nav     { grid-area: nav;     background: #f59e0b; }
.item-footer  { grid-area: footer;  background: #3b82f6; }

.grid-item-adv {
    grid-column: span 1; /* 차지할 열 지정 (값: 1 / 3, span 2, auto) */
    grid-row: span 1; /* 차지할 행 지정 (값: 1 / 3, span 2, auto) */
    grid-area: auto; /* grid-template-areas의 이름이나 숫자 축약형 (row-start / col-start / row-end / col-end) 지정 */
    justify-self: stretch; /* 개별 가로 정렬 (값: start, end, center, stretch) */
    align-self: stretch; /* 개별 세로 정렬 (값: start, end, center, stretch) */

    color: white;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<div class="grid-container-adv">
    <div class="grid-item-adv item-header">Header</div>
    <div class="grid-item-adv item-sidebar">Sidebar</div>
    <div class="grid-item-adv item-content">Main Content</div>
    <div class="grid-item-adv item-nav">Nav</div>
    <div class="grid-item-adv item-footer">Footer</div>
</div>
실행 결과
Grid | Minstudio