CSS Grid 기초

CSS Grid creates a two-dimensional grid container. You define the column and row tracks, and place items into the resulting cells. The fr (fraction) unit distributes remaining space proportionally.

.container {
  display: grid;

  /* Define columns: 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;
  /* Shorthand: repeat(3, 1fr) */

  /* Define rows: auto height or fixed */
  grid-template-rows: auto 200px auto;

  /* Gap between cells */
  gap: 16px;          /* both row and column gap */
  row-gap: 16px;      /* rows only */
  column-gap: 24px;   /* columns only */
}

/* Named template areas */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Named template areas are one of Grid's most powerful features — they make complex layouts readable and self-documenting.

그리드에 항목 배치하기

Grid items can be precisely placed by specifying their start and end lines. Lines are numbered from 1 (or -1 from the end). The span keyword makes items stretch across multiple tracks.

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 100px);
}

/* Place by line numbers */
.item-a {
  grid-column: 1 / 4;     /* span columns 1 to 4 */
  grid-row: 1 / 3;        /* span rows 1 to 3 */
}

/* Using span keyword */
.item-b {
  grid-column: span 2;    /* span 2 columns */
  grid-row: span 3;       /* span 3 rows */
}

/* Shorthand: grid-area: row-start / col-start / row-end / col-end */
.item-c {
  grid-area: 2 / 3 / 4 / 6;
}

/* Alignment */
.container {
  justify-items: center;  /* align items horizontally within cell */
  align-items: center;    /* align items vertically within cell */
  justify-content: space-between; /* align grid horizontally in container */
  align-content: center;          /* align grid vertically in container */
}

/* Per-item alignment */
.item-d {
  justify-self: end;
  align-self: start;
}

반응형 그리드 레이아웃

The killer feature of CSS Grid for responsive design is repeat(auto-fill, minmax()). It creates responsive columns without a single media query.

/* Responsive without media queries using auto-fill/auto-fit */
.card-grid {
  display: grid;

  /* auto-fill: creates as many columns as fit */
  /* minmax(min, max): min width 250px, max is 1fr */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

/* auto-fit vs auto-fill:
   - auto-fill: keeps empty columns (tracks exist, cells empty)
   - auto-fit: collapses empty columns (tracks collapse to 0)
   Use auto-fit when you want items to stretch to fill the row */

.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Media query approach for more control */
.responsive-layout {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: 1 column */
  gap: 16px;
}

@media (min-width: 640px) {
  .responsive-layout {
    grid-template-columns: repeat(2, 1fr); /* tablet: 2 columns */
  }
}

@media (min-width: 1024px) {
  .responsive-layout {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
  }
}

CSS Grid vs Flexbox

The question isn't "which is better" but "which is right for this task." Grid and Flexbox are complementary tools, and modern UIs use both together.

/* Flexbox: 1-dimensional (row OR column) */
.flex-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* Perfect for: navbars, button groups, centering single items */
}

/* Grid: 2-dimensional (rows AND columns) */
.grid-dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 60px 1fr;
  /* Perfect for: page layouts, card grids, complex UI */
}

/* When to use Flexbox:
   - Aligning items in a single row or column
   - Navigation bars
   - Centering content
   - Distributing space between items
   - Components where item count is unknown

   When to use Grid:
   - Two-dimensional page layouts
   - Card grids where alignment across rows matters
   - Complex UI with overlapping elements
   - When you need items to align to a fixed track structure
*/

/* Modern approach: use both together */
.page {
  display: grid;                          /* outer: grid layout */
  grid-template-columns: 250px 1fr;
}
.sidebar-nav {
  display: flex;                          /* inner: flex for list items */
  flex-direction: column;
  gap: 8px;
}

고급 그리드 기법

Subgrid, dense auto-placement, and masonry layouts represent the cutting edge of CSS Grid capabilities available in 2026.

/* Subgrid - align nested grids to parent grid (CSS 2023+) */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.child {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* inherits parent's column tracks */
}

/* Masonry layout (experimental, Chrome 2024+) */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
}

/* Dense auto-placement to fill gaps */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow: dense; /* fills gaps with smaller items */
}
.large-item {
  grid-column: span 2;
  grid-row: span 2;
}

/* CSS Grid animation */
@keyframes expandCol {
  from { grid-template-columns: 0fr 1fr; }
  to   { grid-template-columns: 1fr 1fr; }
}

실제 그리드 패턴

/* Holy Grail Layout */
.holy-grail {
  display: grid;
  grid-template:
    "header" 60px
    "nav main aside" 1fr
    "footer" 50px
    / 200px 1fr 200px;
  min-height: 100vh;
}

/* Magazine/Editorial Layout */
.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.featured { grid-column: 1 / 9; }
.sidebar  { grid-column: 9 / 13; }
.wide     { grid-column: 1 / -1; } /* full width */

/* Card grid with consistent row heights */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 320px; /* fixed row height for alignment */
  gap: 20px;
}

/* Centered content with max-width */
.content-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(16px, 1fr)
    [content-start] min(1200px, calc(100% - 32px))
    [content-end] minmax(16px, 1fr)
    [full-end];
}
.content-grid > * { grid-column: content; }
.full-bleed       { grid-column: full; }

자주 묻는 질문

결론

CSS Grid has matured into an essential layout tool. The combination of explicit placement, auto-placement, named areas, and the fr unit makes it the best solution for complex two-dimensional layouts. Start with the named template areas pattern for your page structure, then use repeat(auto-fill, minmax()) for your card grids.

Use the CSS Formatter tool below to clean up and inspect your grid CSS as you experiment with these patterns.

관련 도구