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 hàng và cột lưới tương ứng. Hỗ trợ phép nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của hoạt ảnh hoặc chuyển tiếp
Ngày 25 tháng 10 năm 2022
Bramus
TwitterGitHubTrang chủ
Trên trang này
Lễ ăn mừng
Tính năng web này hiện có sẵn trong cả ba công cụ trình duyệt
Hỗ trợ trình duyệt chrome 107, Được hỗ trợ 107 firefox 66, Được hỗ trợ 66 edge 107, Supported 107 safari 16, Supported 16
Nội suy giá trị trong CSS
Trong CSS, bạn có thể chuyển đổi trơn tru các thuộc tính từ giá trị này sang giá trị khác bằng cách sử dụ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 mục tiêu và sử dụng thông tin đó để chuyển đổi suôn sẻ sang giá trị mới
Ví dụ
- Chuyển đổi
opacity
từ0
sang1
? - Chuyển đổi
background-color
từwhite
sang
0?.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];
} - Chuyển tiếp
1?.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];
}
Điều tương tự cũng áp dụng cho hoạt ảnh CSS, trong đó trình duyệt sẽ thực hiện phép nội suy giá trị giữa các khung hình chính
Khi sử dụng Thuộc tính tùy chỉnh, hãy sử dụng
.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];
}
2 để cho biết chúng thuộc loại nào. Bằng cách đó, trình duyệt biết cách chuyển đổi từ giá trị này sang giá trị khácNội suy grid-template-columns
và grid-template-rows
Cảm ơn những người đóng góp của chúng tôi tại Microsoft, Chrome–kể từ phiên bản 107–có thể nội suy các giá trị grid-template-columns
và grid-template-rows
Bố cục dạng lưới có thể chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm nửa chừng của hoạt ảnh hoặc chuyển tiếp
Trong bản demo bên dưới, 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 đặt 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 cách sử dụng grid-template-columns
. Khi di chuột, mỗi cột được cung cấp thêm không gian