Tworzenie siatki obrazów jest łatwe dzięki CSS Grid. Ale robienie z siatki wymyślnych rzeczy po obrazy zostały umieszczone, może być trudne do ściągnięcia.
Powiedzmy, że chcesz dodać fantazyjny efekt najechania na obrazy, na których rosną, i powiększać poza wiersze i kolumny, na których się znajdują? Możemy to zrobić!
Fajnie, prawda? Jeśli sprawdzisz kod, nie znajdziesz żadnego JavaScriptu, złożonych selektorów, a nawet magiczne liczby. A to tylko jeden z wielu przykładów, które zbadamy!
Budowanie sieci
Kod HTML do tworzenia siatki jest tak prosty, jak lista obrazów w kontenerze. Nie potrzebujemy więcej.
<div class="gallery">
<img>
<img>
<img>
<!-- etc. -->
</div>W przypadku CSS zaczynamy od ustawienia siatki w następujący sposób:
.gallery {
--s: 150px; /* controls the size */
--g: 10px; /* controls the gap */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}Krótko mówiąc, mamy dwie zmienne, jedną, która kontroluje rozmiar obrazów i drugą, która określa rozmiar przerwy między obrazami. aspect-ratio pomaga zachować proporcje.
Być może zastanawiasz się, dlaczego definiujemy tylko trzy kolumny, ale bez wierszy. Nie, nie zapomniałem o wierszach — po prostu nie musimy ich wyraźnie ustawiać. CSS Grid jest w stanie automatycznie umieszczać elementy na niejawne wiersze i kolumny, co oznacza, że otrzymujemy tyle wierszy, ile potrzeba do dowolnej liczby obrazów, które w nią wrzucimy. Zamiast tego możemy jawnie zdefiniować wiersze, ale musimy dodać grid-auto-flow: column aby upewnić się, że przeglądarka utworzy dla nas potrzebne kolumny.
Oto przykład ilustrujący oba przypadki. Różnica polega na tym, że jeden płynie w a row kierunek i drugi w a column kierunek.
Twój koszyk ten inny artykuł, który napisałem aby uzyskać więcej informacji o niejawnych siatkach i algorytmie automatycznego umieszczania.
Teraz, gdy mamy naszą siatkę, nadszedł czas na stylizację obrazów:
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}Efekt najechania, który tworzymy, opiera się na tym CSS. Prawdopodobnie wydaje ci się to dziwne, że tworzymy obrazy, które nie mają ani szerokości ani wysokości, ale mają minimalną szerokość i wysokość wynoszącą 100%. Ale zobaczysz, że to całkiem fajna sztuczka dla tego, co staramy się osiągnąć.
To, co tutaj robię, to informowanie przeglądarki, że obrazy muszą mieć 0 szerokość i wysokość, ale również musi mieć minimalną wysokość równą 100%… ale 100% czego? W przypadku wartości procentowych wartość wynosi w stosunku do czegoś innego. W tym przypadku nasz obraz jest umieszczony wewnątrz a komórka siatki i musimy znać ten rozmiar, aby wiedzieć, co jest 100% jest w stosunku do.
Przeglądarka najpierw zignoruje min-height: 100% aby obliczyć rozmiar komórek siatki, ale użyje height: 0 w jego obliczeniach. Oznacza to, że nasze obrazy nie będą miały wpływu na rozmiar komórek siatki… ponieważ technicznie nie mają fizycznego rozmiaru. Spowoduje to powstanie trzech równych kolumn i wierszy, które są oparte na rozmiarze siatki (którą zdefiniowaliśmy na .galleryszerokość i aspect-ratio). Wysokość każdej komórki siatki to nic innego jak zmienna --s zdefiniowaliśmy (tak samo dla szerokości).
Teraz, gdy mamy już wymiary komórek naszej siatki, przeglądarka użyje jej z min-height: 100% (I min-width: 100%), co zmusi obrazy do całkowitego wypełnienia przestrzeni każdej komórki siatki. Całość może wyglądać nieco zagmatwana, ale głównym założeniem jest upewnienie się, że siatka określa rozmiar obrazów, a nie na odwrót. Nie chcę, aby obraz określał rozmiar siatki, a po dodaniu efektu najechania zrozumiesz dlaczego.
Tworzenie efektu zawisu
To, co musimy zrobić, to zwiększyć skalę obrazów po najechaniu na nie. Możemy to zrobić, dostosowując obraz width i height on :hover:
.gallery {
--f: 1.5; /* controls the scale factor */
}
.gallery img:hover{
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}Dodałem nową zmienną niestandardową, --f, do miksu jako współczynnika skali do kontrolowania rozmiaru po najechaniu myszą. Zwróć uwagę, jak mnożę zmienną rozmiaru, --s, by obliczyć nowy rozmiar obrazu.
Ale powiedziałeś, że rozmiar obrazu musi wynosić 0. Co się dzieje? Zgubiłem się…
To, co powiedziałem, jest nadal prawdą, ale robię wyjątek dla uniesionego obrazu. Mówię przeglądarce, że tylko jeden obraz będzie miał rozmiar, który nie jest równy zeru — więc przyczyni się do wymiaru siatki — podczas gdy wszystkie pozostałe pozostaną równe 0.
Lewa strona pokazuje siatkę w jej naturalnym stanie bez żadnych uniesionych obrazów, co pokazuje prawa strona. Wszystkie komórki siatki po lewej stronie mają taki sam rozmiar, ponieważ wszystkie obrazy nie mają fizycznych wymiarów.
Po prawej stronie unosi się drugi obraz w pierwszym rzędzie, co daje mu wymiary, które wpływają na rozmiar komórki siatki. Przeglądarka po najechaniu kursorem zwiększy tę konkretną komórkę siatki, co ma wpływ na ogólny rozmiar. A skoro rozmiar całej siatki jest ustawiony (ponieważ ustalamy stałą width na .gallery), pozostałe komórki siatki zareagują logicznie, zmniejszając się, aby zachować .gallerycałkowity rozmiar w takcie.
To nasz efekt powiększenia w akcji! Zwiększając rozmiar tylko jednego obrazu, wpływamy na całą konfigurację siatki, a wcześniej powiedzieliśmy, że siatka definiuje rozmiar obrazów, tak aby każdy obraz rozciągał się wewnątrz swojej komórki siatki, aby wypełnić całą przestrzeń.
Do tego dodamy odrobinę transition I użyć object-fit aby uniknąć zniekształceń obrazu, a iluzja jest idealna!
Wiem, że logika kryjąca się za tym trikiem nie jest łatwa do uchwycenia. Nie martw się, jeśli nie rozumiesz tego w pełni. Najważniejsze jest zrozumienie struktury użytego kodu i sposobu jego modyfikacji, aby uzyskać więcej odmian. To właśnie zrobimy dalej!
Dodawanie kolejnych obrazów
Stworzyliśmy siatkę 3×3, aby wyjaśnić główną sztuczkę, ale prawdopodobnie zgadłeś, że nie musimy na tym poprzestać. Możemy tworzyć zmienne liczby kolumn i wierszy i dodawać tyle obrazów, ile chcemy.
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}Mamy dwie nowe zmienne dotyczące liczby wierszy i kolumn. Następnie po prostu definiujemy za ich pomocą szerokość i wysokość naszej siatki. To samo dla grid-template-columns który używa --m zmienny. I tak jak poprzednio, nie musimy jawnie definiować wierszy, ponieważ funkcja automatycznego umieszczania CSS Grid wykona zadanie za nas, bez względu na to, ile elementów obrazu używamy.
Dlaczego nie różne wartości szerokości i wysokości? Możemy to zrobić:
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--h: 120px; /* control the height */
--w: 150px; /* control the width */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}
.gallery img:hover{
width: calc(var(--w)*var(--f));
height: calc(var(--h)*var(--f));
}Wymieniamy --s z dwiema zmiennymi, jedną dla szerokości, --w, a drugi na wysokość, --h. Następnie odpowiednio dostosowujemy wszystko inne.
Zaczęliśmy więc od siatki o ustalonym rozmiarze i liczbie elementów, ale potem stworzyliśmy nowy zestaw zmiennych, aby uzyskać dowolną konfigurację. Wszystko, co musimy zrobić, to dodać tyle obrazów, ile chcemy i odpowiednio dostosować zmienne CSS. Kombinacje są nieograniczone!
Pełnoekranowa galeria obrazów
A co z wersją pełnoekranową? Tak, to też jest możliwe. Wszystko, czego potrzebujemy, to wiedzieć, jakie wartości musimy przypisać naszym zmiennym. Jeśli chcemy N rzędy obrazów i chcemy, aby nasza siatka była na pełnym ekranie, najpierw musimy rozwiązać na wysokość 100vh:
var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vhTa sama logika dla szerokości, ale przy użyciu vw zamiast vh:
var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vwWykonujemy matematykę, aby uzyskać:
--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)Gotowe!
Jest to dokładnie ten sam kod HTML, ale z kilkoma zaktualizowanymi zmiennymi, które zmieniają rozmiar i zachowanie siatki.
Zauważ, że pominąłem formułę, którą wcześniej ustawiliśmy na .gallery„s width i height i zastąpiłem je 100vw i 100vh, odpowiednio. Formuła da nam ten sam wynik, ale ponieważ wiemy, jakiej wartości chcemy, możemy porzucić całą tę dodatkową złożoność.
Możemy również uprościć --h i --w usuwając lukę z równania na korzyść tego:
--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */Spowoduje to, że obraz po najechaniu kursorem powiększy się nieco bardziej niż w poprzednim przykładzie, ale to nic wielkiego, ponieważ możemy kontrolować skalę za pomocą --f zmienna, której używamy jako mnożnik.
A ponieważ zmienne są używane w jednym miejscu, nadal możemy uprościć kod, całkowicie je usuwając:
Należy zauważyć, że ta optymalizacja dotyczy tylko przykładu pełnoekranowego, a nie przykładów, które omówiliśmy. Ten przykład jest szczególnym przypadkiem, w którym możemy uprościć kod, usuwając niektóre złożone obliczenia, których potrzebowaliśmy w innych przykładach.
Właściwie mamy wszystko, czego potrzebujemy do stworzenia popularnego wzoru paneli pętelkowych:
Zagłębmy się jeszcze głębiej
Czy zauważyłeś, że nasz współczynnik skali może być mniejszy niż? 1? Możemy określić, że rozmiar po najechaniu kursorem będzie mniejszy niż --h or --w ale obraz staje się większy po najechaniu.
Początkowy rozmiar komórki siatki jest równy --w i --h, więc dlaczego mniejsze wartości tworzą komórkę siatki większe? Czy komórka nie powinna się dostać? mniejszy, a przynajmniej zachować swój początkowy rozmiar? A jaki jest ostateczny rozmiar komórki siatki?
Musimy głębiej zagłębić się w to, jak algorytm CSS Grid oblicza rozmiar komórek siatki. A to wiąże się ze zrozumieniem domyślnego CSS Grid rozciąganie wyrównania.
Oto przykład zrozumienia logiki.
Po lewej stronie demo zdefiniowałem dwukolumnową z auto szerokość. Otrzymujemy intuicyjny wynik: dwie równe kolumny (i dwie równe komórki siatki). Ale siatka, którą ustawiłem po prawej stronie demonstracji, gdzie aktualizuję wyrównanie za pomocą place-content: start, wydaje się nie mieć nic.
DevTools pomaga nam pokazać, co tak naprawdę dzieje się w obu przypadkach:
W drugiej siatce mamy dwie kolumny, ale ich szerokość jest równa zeru, więc otrzymujemy dwie komórki siatki, które są zwinięte w lewym górnym rogu kontenera siatki. To jest nie błąd, ale logiczny wynik wyrównania siatki. Kiedy wymiarujemy kolumnę (lub wiersz) za pomocą auto, oznacza to, że jej wielkość dyktuje jej zawartość — ale mamy puste div bez zawartości, na którą można by zrobić miejsce.
Lecz odkąd stretch jest domyślnym wyrównaniem i mamy wystarczająco dużo miejsca w naszej siatce, przeglądarka rozciągnie obie komórki siatki równo, aby pokryć cały ten obszar. W ten sposób siatka po lewej stronie kończy się dwoma równymi kolumnami.
Cena Od Specyfikacja:
Zauważ, że pewne wartości
justify-contentialign-contentmoże spowodować rozdzielenie ścieżek (space-around,space-between,space-evenly) lub do zmiany rozmiaru (stretch).
Zwróć uwagę na „do zmiany rozmiaru”, który jest tutaj kluczem. W ostatnim przykładzie użyłem place-content co jest skrótem od justify-content i align-content
A to jest zakopane gdzieś w algorytm ustalania wielkości siatki okular:
Ten krok rozszerza utwory, które mają samochód funkcja maksymalnego rozmiaru utworu; dzieląc wszelkie pozostałe pozytywne, określony wolna przestrzeń w równym stopniu wśród nich. Jeśli wolne miejsce to nieokreślony, Ale pojemnik z siatką ma zdecydowany min-szerokość/wysokość, użyj tego rozmiaru do obliczenia wolnego miejsca dla tego kroku.
„Równie” wyjaśnia, dlaczego kończymy z równymi komórkami siatki, ale dotyczy „wolnej przestrzeni”, co jest bardzo ważne.
Weźmy poprzedni przykład i dodajmy zawartość do jednego z divs:
Dodaliśmy kwadrat 50px obraz. Oto ilustracja tego, jak każda siatka w naszym przykładzie reaguje na ten obraz:
W pierwszym przypadku widzimy, że pierwsza komórka (na czerwono) jest większa od drugiej (na niebiesko). W drugim przypadku rozmiar pierwszej komórki zmienia się, aby dopasować się do fizycznego rozmiaru obrazu, podczas gdy druga komórka pozostaje bez wymiarów. Wolna przestrzeń jest podzielona równo, ale pierwsza komórka zawiera więcej treści, przez co jest większa.
Oto matematyka, aby obliczyć naszą wolną przestrzeń:
(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px Dzieląc przez dwa — liczbę kolumn — otrzymujemy szerokość 72.5px dla każdej kolumny. Ale dodajemy rozmiar obrazu, 50px, do pierwszej kolumny, która pozostawia nam jedną kolumnę w 122.5px a drugi równy 72.5px.
Ta sama logika dotyczy naszej siatki obrazów. Wszystkie obrazy mają rozmiar równy 0 (brak treści), podczas gdy najechany obraz przyczynia się do rozmiaru — nawet jeśli to tylko 1px — powiększając swoją komórkę siatki od pozostałych. Z tego powodu współczynnik skali może być dowolną wartością większą niż 0 nawet ułamki dziesiętne między 0 i 1.
Aby uzyskać ostateczną szerokość komórek siatki, wykonujemy te same obliczenia, aby uzyskać następujące informacje:
(container width) - (sum of all gaps) - (hovered image width) = (free space)Szerokość kontenera określa:
var(--m)*var(--w) + (var(--m) - 1)*var(--g)…a wszystkie luki są równe:
(var(--m) - 1)*var(--g)…a dla uniesionego obrazu mamy:
var(--w)*var(--f)Możemy to wszystko obliczyć za pomocą naszych zmiennych:
var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))Liczba kolumn jest określona przez --m , więc dzielimy tę wolną przestrzeń po równo, aby uzyskać:
var(--w)*(var(--m) - var(--f))/var(--m)…co daje nam wielkość obrazów, na których nie unosi się kursor. W przypadku najechanych obrazów mamy to:
var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))Jeśli chcemy kontrolować ostateczny rozmiar obrazu po najechaniu kursorem, bierzemy pod uwagę powyższy wzór, aby uzyskać dokładnie taki rozmiar, jaki chcemy. Jeśli np. chcemy, aby obrazek był dwa razy większy:
(var(--m) - var(--f))/var(--m) + var(--f) = 2Tak więc wartość naszego mnożnika skali, --f, musi być równy:
var(--m)/(var(--m) - 1)Za trzy kolumny będziemy mieli 3/2 = 1.5 i to jest współczynnik skali, którego użyłem w pierwszym demo tego artykułu, ponieważ chciałem, aby obraz był dwa razy większy po najechaniu kursorem!
Ta sama logika dotyczy obliczania wysokości i w przypadku, gdy chcemy kontrolować oba z nich niezależnie, będziemy musieli wziąć pod uwagę dwa współczynniki skali, aby upewnić się, że po najechaniu kursorem mamy określoną szerokość i wysokość.
.gallery {
/* same as before */
--fw: 1.5; /* controls the scale factor for the width */
--fh: 1.2; /* controls the scale factor for the height */
/* same as before */
}
.gallery img:hover{
width: calc(var(--w)*var(--fw));
height: calc(var(--h)*var(--fh));
}Teraz znasz wszystkie sekrety tworzenia dowolnego rodzaju siatki obrazów z fajnym efektem najechania, a jednocześnie masz kontrolę nad żądanym rozmiarem za pomocą matematyki, którą właśnie omówiliśmy.
Zamykając
W moim ostatni artykuł, stworzyliśmy złożoną siatkę z kilkoma wierszami kodu CSS, w których zastosowano niejawną siatkę CSS Grid i funkcje automatycznego umieszczania. W tym artykule oparliśmy się na kilku sztuczkach CSS dotyczących rozmiaru siatki, aby stworzyć fantazyjną siatkę obrazów, które powiększają się po najechaniu kursorem i powodują odpowiednie dostosowanie siatki. Wszystko to w uproszczonym kodzie, który można łatwo dostosować za pomocą zmiennych CSS!
W kolejnym artykule pobawimy się kształtami! Połączymy siatkę CSS z maską i clip-path, aby uzyskać fantazyjną siatkę obrazów.
