CSS Grid — Cheatsheet ฉบับใช้งานจริง

Properties หลักที่ต้องรู้

Grid Container

.container {
  display: grid;

  /* กำหนด columns */
  grid-template-columns: 1fr 1fr 1fr;          /* 3 cols เท่ากัน */
  grid-template-columns: repeat(3, 1fr);        /* shorthand */
  grid-template-columns: 200px 1fr auto;        /* ผสม units */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* responsive */

  /* กำหนด rows */
  grid-template-rows: auto 1fr auto;            /* header, main, footer */

  /* ช่องว่าง */
  gap: 1rem;           /* row-gap + column-gap */
  gap: 1rem 1.5rem;    /* row column */

  /* จัด alignment ทั้ง grid */
  justify-items: start | center | end | stretch; /* horizontal ของแต่ละ cell */
  align-items: start | center | end | stretch;   /* vertical ของแต่ละ cell */
}

Grid Item

.item {
  /* ขยาย span หลาย columns/rows */
  grid-column: span 2;        /* ขยาย 2 cols */
  grid-column: 1 / 3;         /* จาก line 1 ถึง 3 */
  grid-column: 1 / -1;        /* ยาวสุด (ถึง end) */
  grid-row: span 2;

  /* จัด alignment ตัวเอง (override container) */
  justify-self: start | center | end | stretch;
  align-self: start | center | end | stretch;
}

Patterns สำเร็จรูป

Responsive Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

ทำงานโดยไม่ต้อง media query เลย — auto-fit จะพับ column เมื่อพื้นที่ไม่พอ

Holy Grail Layout

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.main-area {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
}

Sidebar Layout

.with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
}

@media (max-width: 768px) {
  .with-sidebar {
    grid-template-columns: 1fr;
  }
}

Centered Content

.content-centered {
  display: grid;
  place-items: center;    /* shorthand ของ justify-items + align-items */
  min-height: 100vh;
}

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Responsive Named Areas

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

auto-fill vs auto-fit

/* auto-fill: เก็บ track ว่างๆ ไว้ */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: ยุบ track ว่างๆ → items ขยายเต็มพื้นที่ */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

ใช้ auto-fit เมื่อต้องการให้ items ขยายเต็ม container เมื่อมี items น้อย ใช้ auto-fill เมื่อต้องการคงขนาด column เอาไว้

Subgrid (Modern CSS)

.card {
  display: grid;
  grid-template-rows: subgrid; /* รับ row tracks จาก parent */
  grid-row: span 3;
}

ใช้ align header, body, footer ของ card ใน grid เดียวกัน แม้เนื้อหาต่างกัน

DevTools Tip

Chrome/Firefox → Inspect → เลือก element ที่มี display: grid → คลิก icon ตารางเล็กๆ → จะเห็น grid overlay ที่แสดง line numbers และ area names ได้เลย