🎨 CSS Grid Guide

<div class="grid-basic">
  <div class="grid-item">
    Item 1
  </div>
  <div class="grid-item">
    Item 2
  </div>
  <div class="grid-item">
    Item 3
  </div>
</div>

.grid-basic {
  display: grid;
  grid-template-columns: 
    1fr 1fr 1fr;
  gap: 10px;
}

.grid-item {
  padding: 20px;
  background: 
    linear-gradient(...);
}

/* กำหนดขนาดคอลัมน์ */

/* 3 คอลัมน์เท่ากัน */
grid-template-columns:
  1fr 1fr 1fr;

/* คอลัมน์คงที่ + ยืดหยุ่น */
grid-template-columns:
  200px 1fr;

/* ทำซ้ำ 3 ครั้ง */
grid-template-columns:
  repeat(3, 1fr);

/* Auto-fit responsive */
grid-template-columns:
  repeat(auto-fit,
  minmax(150px, 1fr));

gap: 15px;

/* กำหนดความสูงแถว */

grid-template-columns:
  1fr 1fr;

/* กำหนดความสูง 3 แถว */
grid-template-rows:
  60px 100px 60px;

gap: 10px;

/* ผลลัพธ์: 2 × 3 grid */
/* (2 columns × 3 rows) */

<div class="grid-span">
  <div>Item 1</div>
  <div class="span-2">
    Item 2 (ยืด 2 columns)
  </div>
  <div>Item 3</div>
</div>

.span-2 {
  grid-column: span 2;
}

.span-2-rows {
  grid-row: span 2;
}

.grid-areas {
  display: grid;
  grid-template-columns:
    200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.grid-header {
  grid-area: header;
}

.grid-sidebar {
  grid-area: sidebar;
}

.grid-content {
  grid-area: content;
}

/* Row (ค่าเริ่มต้น) */
grid-template-columns:
  repeat(3, 1fr);
grid-auto-flow: row;

/* Column */
grid-template-rows:
  repeat(2, 80px);
grid-auto-flow: column;

/* Dense (เติมช่องว่าง) */
grid-auto-flow:
  row dense;

gap: 10px;

/* จัดเรียงแนวนอน (column) */
justify-items: start;
justify-items: center;
justify-items: end;
justify-items: stretch;

/* จัดเรียงแนวตั้ง (row) */
align-items: start;
align-items: center;
align-items: end;
align-items: stretch;

/* จัด content ทั้งหมด */
justify-content: center;
align-content: center;

/* Auto-fit: ขึ้นแถวใหม่อัตโนมัติ */
grid-template-columns:
  repeat(auto-fit,
  minmax(200px, 1fr));

/* Auto-fill: เติมคอลัมน์ว่าง */
grid-template-columns:
  repeat(auto-fill,
  minmax(150px, 1fr));

gap: 15px;

/* Media query */
@media (max-width: 768px) {
  grid-template-columns:
    repeat(2, 1fr);
}

.dashboard-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-template-rows:
    auto auto auto auto;
  gap: 15px;
}

.dashboard-large {
  grid-column: span 2;
  grid-row: span 2;
}

.dashboard-item {
  min-height: 80px;
}