Snook đã xuất bản một bài báo có tiêu đề “Overlapping Header with CSS Grid”, nơi anh ấy xem xét một mẫu thiết kế tiêu đề mà tôi cảm thấy vượt qua các xu hướng và đã được phổ biến mãi mãi. Ý tưởng là tiêu đề quá khổ và khu vực nội dung chính chui vào đó và chồng lên nền của tiêu đề. Chỉ có một cái gì đó khá tốt và an ủi về nó.
Tâm trí tôi hướng về cùng một nơi mà Snook đã làm:
Trong lịch sử, tôi đã làm điều này với lợi nhuận âm. Tiêu đề có chiều cao thêm một loạt các phần đệm ở dưới cùng và sau đó phần nội dung nhận được một
margin-top: -50pxhoặc bất cứ điều gì thiết kế yêu cầu.
Nhưng sau đó anh ấy quyết định làm điều đó với CSS lưới thay thế! Hấp dẫn. Tại sao? Đó là những gì chúng ta sẽ đi vào. Lưới chỉ có thể cảm thấy (và thực sự là) chắc chắn hơn. Lưới cũng có thể linh hoạt hơn. Ví dụ: max-heightvà autolề rất tốt trong việc căn giữa, nhưng nếu bạn muốn các rãnh không đồng đều ở các cạnh thì sao? Điều đó sẽ khó ở đó và dễ dàng với Grid. Ethan Marcotte đã viết:
Thay vì chỉ mặc định
max-widthlà một ràng buộc, tôi có thể sử dụng không gian trống xung quanh thiết kế của mình và coi nó như một công cụ bố cục.
Tôi cố gắng thiết kế ngược lại ý tưởng của Snook trong video này, sau đó cuối cùng so sánh nó với kết quả cuối cùng của tôi.
- Snook's
- Của tôi (làm sạch một video hậu kỳ smidge cho thẩm mỹ)