ช่องว่างและการจัดวางกริด

ช่องว่างใน CSS Grid

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

row-gap และ column-gap

<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

หมายเลขเส้นกริด

grid-column และ grid-row

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
  <div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
  <div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>

คีย์เวิร์ด span

<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

หมายเลขเส้นติดลบ

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>

ชวเลข grid-area

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
  <div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

การวางอัตโนมัติ

justify-items และ align-items ในกริด

<div class="grid" style="min-height:120px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>

justify-self และ align-self

<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
  <div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>

รายการกริดที่ซ้อนทับกัน

<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
  <div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
  <div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>

ตรวจสอบความเข้าใจ

สรุปทบทวน