Bố cục lưới CSS Cách sử dụng minmax ()
Các Mô-đun bố trí lưới CSS đưa thiết kế đáp ứng lên cấp độ tiếp theo bằng cách giới thiệu loại linh hoạt mới điều đó chưa từng thấy trước đây Bây giờ, chúng ta không thể chỉ xác định lưới tùy chỉnh cực kỳ nhanh chỉ với CSS thuần túy, nhưng CSS Grid cũng có nhiều viên ngọc ẩn cho phép chúng tôi điều chỉnh lưới hơn nữa và đạt được bố cục phức tạp.
Các nhỏ nhất lớn nhất() chức năng là một trong những tính năng ít được biết đến rộng rãi Nó có thể xác định kích thước của rãnh lưới tối thiểu đến phạm vi tối đa để lưới có thể thích ứng với chế độ xem của từng người dùng theo cách tốt nhất có thể.
Cú pháp
Cú pháp của nhỏ nhất lớn nhất() chức năng tương đối đơn giản, nó cần hai đối số: giá trị tối thiểu và tối đa:
tối thiểu (tối thiểu, tối đa)
Các tối thiểu giá trị phải nhỏ hơn hơn tối đa, nếu không thì tối đa bị trình duyệt bỏ qua.
Chúng ta có thể sử dụng nhỏ nhất lớn nhất() có chức năng như giá trị của lưới-mẫu-cột hoặc là lưới-mẫu-hàng tài sản (hoặc cả hai). Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng trước đây, vì đó là trường hợp sử dụng thường xuyên hơn nhiều.
.container hiển thị: lưới; lưới-mẫu-cột: minmax (100px, 200px) 1fr 1fr; lưới-mẫu-hàng: 100px 100px 100px; khoảng cách lưới: 10px;
Trong bản demo Codepen dưới đây, bạn có thể tìm thấy Mã HTML và CSS chúng tôi sẽ sử dụng trong suốt bài viết.
Chúng ta có thể sử dụng loại giá trị khác nhau bên trong nhỏ nhất lớn nhất() chức năng, tất cả phụ thuộc vào loại lưới tùy chỉnh mà chúng tôi muốn tạo.
Giá trị độ dài tĩnh
Có hai cách cơ bản để chúng ta có thể sử dụng nhỏ nhất lớn nhất() chức năng với giá trị độ dài tĩnh.
Thứ nhất, chúng ta có thể sử dụng nhỏ nhất lớn nhất() chỉ cho một cột lưới và xác định chiều rộng của các cột khác là các giá trị tĩnh đơn giản (pixel ở đây).
lưới-mẫu-cột: minmax (100px, 200px) 200px 200px;
Trên bản demo gif bên dưới, bạn có thể thấy rằng bố cục này là không đáp ứng, tuy nhiên cột đầu tiên có linh hoạt. Cột thứ hai và thứ ba giữ nguyên chiều rộng cố định (200px) trong khi cột thứ nhất nằm trong khoảng từ 100px đến 200px, dựa trên không gian có sẵn.
Thứ hai, chúng ta có thể định nghĩa chiều rộng của nhiều hơn một cột lưới sử dụng nhỏ nhất lớn nhất(). Các giá trị tối thiểu và tối đa đều tĩnh, do đó, theo mặc định, lưới là không đáp ứng. Tuy nhiên, các cột là Linh hoạt, nhưng chỉ trong khoảng từ 100px đến 200px. Họ phát triển và co lại đồng thời khi chúng tôi thay đổi kích thước khung nhìn.
lưới-mẫu-cột: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Lưu ý rằng chúng ta cũng có thể sử dụng nói lại() chức năng togehter với nhỏ nhất lớn nhất(). Vì vậy, đoạn mã trước cũng có thể được viết như thế này:
lưới-mẫu-cột: lặp lại (3, minmax (100px, 200px));
Giá trị độ dài động
Ngoài các giá trị tĩnh, nhỏ nhất lớn nhất() chức năng cũng chấp nhận đơn vị tỷ lệ phần trăm và đơn vị phân số mới (fr) như là đối số. Bằng cách sử dụng chúng, chúng ta có thể đạt được các lưới tùy chỉnh là cả hai đáp ứng và thay đổi kích thước của chúng theo không gian có sẵn.
Mã dưới đây dẫn đến một lưới trong đó chiều rộng của cột đầu tiên nằm trong khoảng từ 50% đến 80% trong khi thứ hai và thứ ba chia sẻ không gian còn lại.
lưới-mẫu-cột: minmax (50%, 80%) 1fr 1fr;
Khi chúng ta sử dụng các giá trị động với nhỏ nhất lớn nhất() chức năng, nó rất quan trọng để thiết lập một quy tắc có ý nghĩa. Hãy để tôi chỉ cho bạn một ví dụ lưới điện sụp đổ:
lưới-mẫu-cột: minmax (1fr, 2fr) 1fr 1fr;
Quy tắc này không có ý nghĩa gì, vì trình duyệt là không thể quyết định giá trị nào được gán cho nhỏ nhất lớn nhất() chức năng. Giá trị tối thiểu sẽ dẫn đến một 1fr 1fr 1fr chiều rộng cột, trong khi tối đa đến 2fr 1fr 1fr. Nhưng, cả hai đều có thể ngay cả trên một màn hình rất nhỏ. Có không có gì trình duyệt có thể liên quan đến.
Đây là kết quả:
Kết hợp các giá trị tĩnh và động
Cũng có thể kết hợp các giá trị tĩnh và động. Chẳng hạn, trong bản demo Codepen ở trên, tôi đã sử dụng minmax (100px, 200px) 1fr 1fr; quy tắc dẫn đến một lưới trong đó cột đầu tiên trong phạm vi từ 100px đến 200px và không gian còn lại là chia sẻ đồng đều giữa hai người kia.
lưới-mẫu-cột: minmax (100px, 200px) 1fr 1fr;
Nó xen kẽ để quan sát rằng khi khung nhìn phát triển, đầu tiên, cột đầu tiên tăng từ 100px đến 200px. Hai người kia, được cai trị bởi đơn vị fr, bắt đầu phát triển chỉ sau khi cái đầu tiên đạt được chiều rộng tối đa của nó. Điều này là hợp lý, vì mục tiêu của đơn vị phân số là phân chia không gian có sẵn (còn lại).
Các nội dung tối thiểu, nội dung tối đa, và Tự động từ khóa
Có một loại thứ ba của giá trị chúng ta có thể gán cho nhỏ nhất lớn nhất() chức năng. Các nội dung tối thiểu, nội dung tối đa, và Tự động từ khóa liên quan đến kích thước của rãnh lưới nội dung nó chứa.
nội dung tối đa
Các nội dung tối đa từ khóa chỉ đạo trình duyệt mà cột lưới cần phải rộng như phần tử rộng nhất mà nó chứa.
Trên bản demo bên dưới, tôi đã đặt một Hình ảnh rộng 400px bên trong rãnh lưới đầu tiên và sử dụng quy tắc CSS sau (bạn có thể tìm thấy bản demo Codepen với mã được sửa đổi đầy đủ ở cuối bài viết):
.container lưới-mẫu-cột: nội dung tối đa 1fr 1fr; / ** * Tương tự với ký hiệu minmax (): * lưới-mẫu-cột: minmax (nội dung tối đa, nội dung tối đa) 1fr 1fr; * /
Tôi chưa sử dụng nhỏ nhất lớn nhất() ký hiệu chưa, nhưng trong phần bình luận mã ở trên, bạn có thể thấy cùng một mã sẽ trông như thế nào với nó (mặc dù nó không cần thiết ở đây).
Như bạn có thể thấy, cột lưới đầu tiên rộng bằng phần tử rộng nhất của nó (ở đây là hình ảnh). Bằng cách này, người dùng luôn có thể nhìn thấy hình ảnh ở kích thước đầy đủ. Tuy nhiên, dưới một kích thước khung nhìn nhất định, bố cục này là không đáp ứng.
nội dung tối thiểu
Các nội dung tối thiểu từ khóa chỉ đạo trình duyệt rằng cột lưới cần phải rộng bằng yếu tố hẹp nhất chứa nó, theo cách mà không dẫn đến tràn.
Hãy xem bản demo trước với hình ảnh trông như thế nào nếu chúng ta thay đổi giá trị của cột đầu tiên thành nội dung tối thiểu:
.container lưới-mẫu-cột: min-content 1fr 1fr; / ** * Tương tự với ký hiệu minmax (): * lưới-mẫu-cột: minmax (nội dung tối thiểu, nội dung tối thiểu) 1fr 1fr; * /
Tôi để lại nền màu xanh bên dưới hình ảnh để bạn có thể thấy kích thước đầy đủ của ô lưới đầu tiên.
Như bạn có thể thấy, cột đầu tiên giữ lại chiều rộng nhỏ nhất có thể đạt được mà không cần tràn. Trong ví dụ này, điều này sẽ được xác định bởi chiều rộng tối thiểu của các ô lưới thứ 4 và thứ 7, xuất phát từ đệm và cỡ chữ thuộc tính, như hình ảnh trong ô đầu tiên có thể thu nhỏ về không không tràn.
Nếu ô lưới chứa một chuỗi văn bản, nội dung tối thiểu sẽ là bằng chiều rộng của từ dài nhất, vì đó là yếu tố nhỏ nhất không thể bị thu hẹp thêm mà không bị tràn. Đây là một bài viết tuyệt vời của BitsOfCode nơi bạn có thể xem nội dung tối thiểu và nội dung tối đa hành xử khi ô lưới chứa một chuỗi văn bản.
Sử dụng nội dung tối thiểu và nội dung tối đa cùng với nhau
Nếu chúng ta sử dụng nội dung tối thiểu và nội dung tối đa cùng với nhau bên trong nhỏ nhất lớn nhất() chức năng chúng ta có được một cột lưới:
- là đáp ứng
- không có bất kỳ tràn
- không phát triển rộng hơn yếu tố rộng nhất của nó
.container lưới-mẫu-cột: minmax (nội dung tối thiểu, nội dung tối đa) 1fr 1fr;
Chúng tôi cũng có thể sử dụng nội dung tối thiểu và nội dung tối đa từ khóa cùng với các giá trị độ dài khác bên trong nhỏ nhất lớn nhất() chức năng, cho đến khi quy tắc có ý nghĩa. Ví dụ, tối thiểu (25%, nội dung tối đa) hoặc là minmax (nội dung tối thiểu, 300px) sẽ là cả hai quy tắc hợp lệ.
Tự động
Cuối cùng, chúng ta cũng có thể sử dụng Tự động từ khóa như là một đối số của nhỏ nhất lớn nhất() chức năng.
Khi nào Tự động Là được sử dụng tối đa, giá trị của nó giống hệt với nội dung tối đa.
Khi nó được sử dụng tối thiểu, giá trị của nó được chỉ định bởi chiều rộng tối thiểu / chiều cao tối thiểu quy tắc, có nghĩa là Tự động đôi khi giống hệt với nội dung tối thiểu, nhưng không phải lúc nào.
Trong ví dụ trước của chúng tôi, nội dung tối thiểu không bằng Tự động, vì chiều rộng tối thiểu của cột lưới đầu tiên luôn nhỏ hơn chiều cao tối thiểu của nó. Vì vậy, quy tắc CSS thuộc:
.container lưới-mẫu-cột: minmax (nội dung tối thiểu, nội dung tối đa) 1fr 1fr;
cũng có thể được viết như thế này:
.container lưới-mẫu-cột: minmax (tự động, tự động) 1fr 1fr;
Các Tự động từ khóa cũng có thể là được sử dụng cùng với các đơn vị tĩnh và động khác (pixel, đơn vị fr, tỷ lệ phần trăm, v.v.) bên trong nhỏ nhất lớn nhất() chức năng, ví dụ tối thiểu (tự động, 300px) sẽ là một quy tắc hợp lệ.
Bạn có thể kiểm tra làm thế nào nội dung tối thiểu, nội dung tối đa, và Tự động từ khóa làm việc với nhỏ nhất lớn nhất() chức năng trong bản demo Codepen sau:
