Mission 6: Grid

เป้าหมายของ Mission นี้: จัดตารางหลายแถวหลายคอลัมน์ด้วย display: grid

display: grid

Flexbox เก่งเรื่องเรียงแถวเดียว แต่ถ้าอยากได้ตารางหลายแถวหลายคอลัมน์พร้อมกัน display: grid เหมาะกว่า — ใช้คู่กับ grid-template-columns เพื่อกำหนด จำนวนและความกว้างคอลัมน์

grid-template-columns

repeat(3, 1fr) อ่านว่า "สร้าง 3 คอลัมน์ แต่ละคอลัมน์กว้างเท่ากัน (1 fraction ของพื้นที่ที่เหลือ)" — พอมี item เกิน 3 ตัว มันจะขึ้นแถวใหม่ให้เอง อัตโนมัติ

Demo

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}