Układ siatki CSS Jak używać minmax ()

The Moduł układu siatki CSS przenosi responsywny projekt na wyższy poziom, wprowadzając nowy rodzaj elastyczności nigdy wcześniej tego nie widziałem. Teraz nie możemy tylko zdefiniuj niestandardowe siatki niesamowicie szybki tylko z czystym CSS, ale CSS Grid również wiele ukrytych klejnotów które pozwalają nam na dalsze ulepszanie siatki i uzyskiwanie skomplikowanych układów.

The minimum maksimum() funkcjonować jest jedną z tych mniej znanych funkcji. Umożliwia zdefiniowanie rozmiaru ścieżki siatki jako minimum do maksymalnego zasięgu aby siatka mogła dostosować się do widoku każdego użytkownika w najlepszy możliwy sposób.

Składnia

Składnia minimum maksimum() funkcja jest stosunkowo prosta dwa argumenty: minimalna i maksymalna wartość:

 minmax (min, max) 

The min wartość musi być mniejszy niż max, Inaczej max zostanie zignorowany przez przeglądarkę.

Możemy użyć minimum maksimum() funkcjonować jako wartość kolumny-szablon-kolumny lub rzędy szablonu siatki własność (lub obie). W naszym przykładzie użyjemy pierwszego, ponieważ jest to znacznie częstszy przypadek użycia.

 .kontener display: grid; grid-template-columns: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px;  

W poniższym pokazie Codepen możesz znaleźć Kod HTML i CSS użyjemy w całym artykule.

Możemy użyć różne rodzaje wartości w środku minimum maksimum() funkcja, wszystko zależy od rodzaju siatki niestandardowej, którą chcemy utworzyć.

Statyczne wartości długości

Istnieją dwa podstawowe sposoby korzystania z minimum maksimum() funkcja z statyczne wartości długości.

Po pierwsze, możemy użyć minimum maksimum() tylko dla jednej kolumny siatki i określ szerokość innych kolumn jako proste wartości statyczne (tutaj piksele).

 grid-template-columns: minmax (100px, 200px) 200px 200px; 

Na poniższym demo gif widać, że ten układ jest nie reaguje, jednak pierwsza kolumna ma trochę elastyczności. Druga i trzecia kolumna zachowują swoją stałą szerokość (200px), podczas gdy pierwsza kolumna waha się od 100px do 200px, na podstawie dostępnej przestrzeni.

Po drugie, możemy zdefiniować szerokość więcej niż jedna kolumna siatki za pomocą minimum maksimum(). Wartości min i max są statyczne, więc domyślnie siatka jest nie reaguje. Jednak same kolumny są elastyczne, ale tylko między 100px a 200px. one rosną i kurczą się jednocześnie gdy zmieniamy rozmiar rzutni.

 grid-template-columns: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Zauważ, że możemy również Użyj powtarzać() funkcjonować razem z minimum maksimum(). Tak więc poprzedni fragment kodu można również napisać w ten sposób:

 grid-template-columns: repeat (3, minmax (100px, 200px)); 

Dynamiczne wartości długości

Oprócz wartości statycznych minimum maksimum() funkcja również akceptuje jednostki procentowe i nowa jednostka frakcji (fr) jako argumenty. Korzystając z nich, możemy uzyskać niestandardowe siatki, które są oba czuły i zmień ich wymiary zgodnie z dostępną przestrzenią.

Poniższy kod daje siatkę, w której szerokość pierwszej kolumny waha się między 50% a 80% podczas gdy drugi i trzeci równomiernie dziel pozostałe miejsce.

 grid-template-columns: minmax (50%, 80%) 1fr 1fr; 

Kiedy używamy wartości dynamicznych za pomocą minimum maksimum() funkcja, ważne jest, aby skonfigurować zasada, która ma sens. Pozwól, że pokażę ci przykład, w którym siatka się rozpada:

 grid-template-columns: minmax (1fr, 2fr) 1fr 1fr; 

Ta zasada nie ma sensu, ponieważ przeglądarka jest nie mogę zdecydować którą wartość przypisać do minimum maksimum() funkcjonować. Minimalna wartość prowadziłaby do a 1fr 1fr 1fr szerokość kolumny, a maksymalna do 2fr 1fr 1fr. Ale oba są możliwe nawet na bardzo małym ekranie. Jest nic, czego przeglądarka nie może dotyczyć.

Oto wynik:

Łącz wartości statyczne i dynamiczne

Możliwe jest również łącz wartości statyczne i dynamiczne. Na przykład w demie Codepen powyżej użyłem minmax (100px, 200px) 1fr 1fr; reguła powodująca utworzenie siatki, w której znajduje się pierwsza kolumna waha się między 100px a 200px a pozostała przestrzeń to równomiernie dzielone między pozostałe dwa.

 grid-template-columns: minmax (100px, 200px) 1fr 1fr; 

Warto zauważyć, że wraz ze wzrostem rzutni pierwsza kolumna rośnie od 100 do 200 pikseli. Pozostałe dwa, rządzone przez jednostkę fr, zaczynają rosnąć dopiero gdy pierwsza osiągnie maksymalną szerokość. Jest to logiczne, ponieważ celem jednostki ułamkowej jest podzielenie dostępnej (pozostałej) przestrzeni.

The min-content, max-content, i automatyczny słowa kluczowe

Jest trzeci rodzaj wartości możemy przypisać do minimum maksimum() funkcjonować. The min-content, max-content, i automatyczny słowa kluczowe odnoszą się do wymiarów ścieżki siatki do zawartość, którą zawiera.

max-content

The max-content słowo kluczowe Kieruje przeglądarką, którą musi być kolumna siatki tak szeroki jak najszerszy element, który zawiera.

Na poniższym demo umieściłem Obraz o szerokości 400 pikseli wewnątrz pierwszego toru siatki i użył następującej reguły CSS (możesz znaleźć demo Codepen z pełnym zmodyfikowanym kodem na końcu artykułu):

 .container grid-template-columns: max-content 1fr 1fr; / ** * To samo z notacją minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

Nie użyłem minimum maksimum() notacja jeszcze, ale w powyższym kodzie możesz zobaczyć, jak będzie wyglądał z tym samym kodem (choć tutaj jest to zbędne).

Jak widać, pierwsza kolumna siatki jest tak szeroka jak jej najszerszy element (tutaj obraz). W ten sposób użytkownicy mogą zawsze zobaczyć obraz w pełnym rozmiarze. Jednak pod pewnym rozmiarem rzutni układ ten jest nie reaguje.

min-content

The min-content słowo kluczowe Kieruje przeglądarką, że kolumna siatki musi być tak szeroka jak najwęższy element, który zawiera, w taki sposób nie prowadzi do przepełnienia.

Zobaczmy, jak wygląda poprzednie demo z obrazem, jeśli zmienimy wartość pierwszej kolumny na min-content:

 .container grid-template-columns: min-content 1fr 1fr; / ** * To samo z notacją minmax (): * kolumny-szablon-kolumny: minmax (zawartość-min, zawartość-min) 1fr 1fr; * / 

Zostawiłem zielone tło pod obrazem, abyś mógł zobaczyć pełny rozmiar pierwszej komórki siatki.

Jak widać, pierwsza kolumna zachowuje najmniejszą szerokość można osiągnąć bez przepełnienia. W tym przykładzie będzie to zdefiniowane przez minimalną szerokość czwartej i siódmej komórki siatki, która wynika z wyściółka i rozmiar czcionki właściwości, jak obraz w pierwszej komórce można zmniejszyć do zera bez przelewu.

Jeśli komórka siatki zawierała ciąg tekstowy, min-content byłoby równa szerokości najdłuższego słowa, ponieważ jest to najmniejszy element, którego nie można dalej obkurczyć bez przepełnienia. Oto świetny artykuł BitsOfCode, w którym możesz zobaczyć, jak to zrobić min-content i max-content zachowuj się, gdy komórka siatki zawiera ciąg tekstowy.

Za pomocą min-content i max-content razem

Jeśli my posługiwać się min-content i max-content razem w środku minimum maksimum() funkcja otrzymujemy kolumnę siatki, która:

1. jest responsywny
2. nie ma żadnego przepełnienia
3. nie szerszy niż najszerszy element

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

Możemy również użyć min-content i max-content słowa kluczowe razem z innymi wartościami długości w środku minimum maksimum() funkcja, dopóki reguła nie ma sensu. Na przykład, minmax (25%, maksymalna zawartość) lub minmax (min-content, 300px) byłyby to zarówno obowiązujące zasady.

automatyczny

Wreszcie możemy również użyć automatyczny słowo kluczowe jako argument minimum maksimum() funkcjonować.

Gdy automatyczny jest używane jako maksimum, jego wartość jest identyczna z max-content.

Kiedy jest używany jako minimum, jego wartość jest określona przez min-width / min-height reguła, co oznacza automatyczny jest czasami identyczny z min-content, ale nie zawsze.

W naszym poprzednim przykładzie, min-content robi równe automatyczny, ponieważ minimalna szerokość pierwszej kolumny siatki jest zawsze mniejsza niż jej minimalna wysokość. Tak więc przynależna zasada CSS:

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

można również napisać w ten sposób:

 .container grid-template-columns: minmax (auto, auto) 1fr 1fr;  

The automatyczny słowo kluczowe może być również używane razem z innymi jednostkami statycznymi i dynamicznymi (piksele, jednostka miary, procenty itp.) wewnątrz minimum maksimum() funkcja, na przykład minmax (auto, 300px) byłoby ważną zasadą.

Możesz sprawdzić, jak min-content, max-content, i automatyczny słowa kluczowe działają z minimum maksimum() funkcja w następującej wersji demonstracyjnej Codepen: