ในตารางกริด CSS พร็อพเพอร์ตี้ grid-template-columns และ grid-template-rows ช่วยให้คุณกำหนดชื่อบรรทัดและติดตามขนาดของคอลัมน์และแถวในตารางกริดได้ตามลำดับ การรองรับการประมาณค่าในช่วงคุณสมบัติเหล่านี้ช่วยให้เลย์เอาต์แบบตารางกริดเปลี่ยนไปมาระหว่างสถานะได้อย่างราบรื่นแทนการสแนปที่จุดครึ่งทางของภาพเคลื่อนไหวหรือการเปลี่ยน
การสนับสนุนเบราว์เซอร์
- 107
- 107
- 66
- 16
การประมาณค่าใน CSS
ใน 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
ผู้มีส่วนร่วมของเราจาก Microsoft ทำให้ Chrome ในเวอร์ชัน 107 สามารถประมาณค่า 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 ด้วย
ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่