CSS Subgrid ทำให้ grandchildren align กับ parent grid ได้

ปัญหาคลาสสิก: card grid แต่ละ card มี header, body, footer — อยากให้ทุก footer อยู่บรรทัดเดียวกันข้าม card แต่ทำไม่ได้เพราะแต่ละ card คือ grid container ของตัวเอง

Subgrid แก้ปัญหานี้โดยตรง:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* header / body / footer */
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* รับ track ของ parent มาใช้ */
}

แต่ละ .card ไม่ต้องกำหนด row ซ้ำ — ใช้ track เดียวกันกับ parent grid เลย ทำให้ header, body, footer ของทุก card align กันพอดีโดยอัตโนมัติ

Support: Chrome 117+, Firefox 71+, Safari 16+ — ใช้ได้แล้วใน production