เลย์เอาต์ตารางกริดแบบเคลื่อนไหวใน CSS

ใน CSS Grid พร็อพเพอร์ตี้ grid-template-columns และ grid-template-rows ช่วยให้คุณกำหนดชื่อบรรทัด และติดตามการปรับขนาดของคอลัมน์และแถวของตารางกริดได้ การรองรับการหาค่าระหว่างของพร็อพเพอร์ตี้เหล่านี้ช่วยให้เลย์เอาต์ตารางกริดเปลี่ยนสถานะได้อย่างราบรื่น แทนที่จะหยุดอยู่ที่จุดกึ่งกลางของภาพเคลื่อนไหวหรือการเปลี่ยน

การรองรับเบราว์เซอร์

  • Chrome: 107
  • Edge: 107
  • Firefox: 66
  • Safari: 16

ใน CSS คุณสามารถเปลี่ยนพร็อพเพอร์ตี้จากค่าหนึ่งไปยังอีกค่าหนึ่งได้อย่างราบรื่นโดยใช้พร็อพเพอร์ตี้ transition

#target {
 
opacity: 0.5;
 
transition: opacity ease-in-out 0.25s;
}

#target:hover {
 
opacity: 1;
}

เครื่องมือแสดงผลจะตรวจหาประเภทของค่าพร็อพเพอร์ตี้เป้าหมายโดยอัตโนมัติ และใช้ข้อมูลดังกล่าวเพื่อเปลี่ยนเป็นค่าใหม่อย่างราบรื่น

เช่น

  • กำลังเปลี่ยน opacity จาก 0 เป็น 1 ใช่ไหม นั่นคือการหาค่าเฉลี่ยเชิงตัวเลข
  • กำลังเปลี่ยน background-color จาก white เป็น black ใช่ไหม ค่อยๆ เปลี่ยนจากสีต้นทางเป็นสีเป้าหมาย
  • การเปลี่ยน width หาค่าระหว่างจุดด้วยตัวเลข โดยแปลงหน่วยไปพร้อมกันหากจำเป็น

เช่นเดียวกับภาพเคลื่อนไหว CSS ที่เบราว์เซอร์จะทำการหาค่าเฉลี่ยระหว่างคีย์เฟรม

เคลื่อนไหว grid-template-columns และ grid-template-rows

เลย์เอาต์ตารางกริดยังเปลี่ยนสถานะได้อย่างราบรื่นแทนที่จะหยุดอยู่ที่จุดกึ่งกลางของภาพเคลื่อนไหวหรือการเปลี่ยนด้วย

ในการแสดงตัวอย่างต่อไปนี้ ตารางกริดจะแสดงรูปโปรไฟล์หลายรายการ ระบบจะวางรูปโปรไฟล์ซ้อนกันเพื่อประหยัดพื้นที่ โดยจำกัดความกว้างของแต่ละคอลัมน์โดยใช้ grid-template-columns เมื่อวางเมาส์เหนือ แต่ละคอลัมน์จะมีพื้นที่มากขึ้น

.avatars {
 
display: grid;
 
gap: 0.35em;

 
grid-auto-flow: column;
 
grid-template-columns: repeat(4, 2em);
 
transition: all ease-in-out 0.25s;
}

.avatars:hover {
 
grid-template-columns: repeat(4, 4em);
}

เมื่อใช้พร็อพเพอร์ตี้ transition ตารางกริดจะหาค่าระหว่างค่าต่างๆ ได้อย่างราบรื่น

ผลนี้มีผลกับภาพเคลื่อนไหวที่เปลี่ยนค่า grid-template-columns หรือ grid-template-rows ด้วย