Bố cục lưới dạng ảnh động CSS

Bramus

Trong CSS Grid, các thuộc tính grid-template-columns và grid-template-rows cho phép bạn xác định tên dòng và theo dõi kích thước của các cột và hàng trong lưới tương ứng. Việc hỗ trợ nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi mượt mà giữa các trạng thái, thay vì chuyển đổi đột ngột ở giữa ảnh động hoặc hiệu ứng chuyển đổi.

Browser Support

• 107
• 107
• 66
• 16

Nội suy giá trị trong CSS

Trong CSS, bạn có thể chuyển đổi mượt mà các thuộc tính từ giá trị này sang giá trị khác bằng thuộc tính transition.

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

#target:hover {
  opacity: 1;
}

Công cụ kết xuất sẽ tự động phát hiện loại giá trị của thuộc tính được nhắm đến và sử dụng thông tin đó để chuyển đổi mượt mà sang giá trị mới.

Ví dụ:

• Chuyển opacity từ 0 sang 1? Đó là phép nội suy số.
• Chuyển background-color từ white sang black? Làm mờ giữa màu nguồn và màu mục tiêu.
• Chuyển đổi width? Nội suy bằng số, chuyển đổi đơn vị trong quá trình thực hiện nếu cần.

Điều tương tự cũng áp dụng cho ảnh động CSS, trong đó trình duyệt sẽ nội suy giá trị giữa các khung hình chính.

Lưu ý: Khi sử dụng Thuộc tính tuỳ chỉnh, hãy dùng @property để cho biết loại thuộc tính. Bằng cách đó, trình duyệt sẽ biết cách chuyển đổi từ giá trị này sang giá trị khác.

Tạo ảnh động cho grid-template-columns và grid-template-rows

Bố cục lưới cũng có thể chuyển đổi mượt mà giữa các trạng thái, thay vì chuyển đổi đột ngột ở giữa ảnh động hoặc hiệu ứng chuyển đổi.

Trong bản minh hoạ sau, một lưới đang hiển thị một số hình đại diện. Để tiết kiệm không gian, các hình đại diện được bố trí chồng lên nhau bằng cách giới hạn chiều rộng của mỗi cột bằng grid-template-columns. Khi di chuột, mỗi cột sẽ có thêm không gian.

.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);
}

Khi có thuộc tính transition, lưới sẽ nội suy mượt mà giữa các giá trị.

Hiệu ứng này cũng áp dụng cho ảnh động thay đổi giá trị grid-template-columns hoặc grid-template-rows.