Przenoszenie elementów w układzie siatki CSS [Przewodnik]
Używając Moduł układu siatki CSS w projektowaniu stron internetowych staje się coraz bardziej wykonalny, gdy zaczyna się więcej przeglądarek Wspieraj to. Tworząc układy wypełniające komórki siatki, może nadejść chwila, kiedy chcesz osiągnąć bardziej skomplikowane rzeczy.
Na przykład możesz chcieć lekko się poruszać niektóre elementy siatki utknęły w obszarach siatki. Możesz także chcieć przenieś je z pojemnika na siatkę (przepełnienie) lub nad sobą (nakładają się) lub po prostu… do pustej przestrzeni wokół.
W tym poście pokażę ci, jak możesz przesuwanie, porządkowanie, przepełnianie, nakładanie się i sortowanie elementów siatki kiedy używasz modułu układu siatki CSS.
Utwórz siatkę CSS
Najpierw stwórzmy prostą siatkę CSS jeden rząd i trzy kolumny.
W HTML tworzymy wiązkę div, gdzie kontener siatki zawiera trzy elementy siatki.
W CSS: kontener siatki zawiera wyświetlacz: siatka; własność i elementy siatki mieć obszar siatki który identyfikuje nazwy obszarów elementów siatki.
My także Dodaj obszary siatki-szablonu własność do kontenera siatki, w którym są używane nazwy obszarów siatki przypisz obszary siatki do komórek siatki, które reprezentują.
Wszystkie kolumny przyjąć rozmiar jednej frakcji (fr) szerokości pojemnika, zapewniając zamknięcie elementów siatki.
.grid-container display: grid; grid-template-areas: „left center right”; grid-template-columns: repeat (3, 1fr); grid-template-rows: 80px; grid-gap: 5px; szerokość: 360px; kolor tła: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Elementy siatki przepełnienia
Możesz zrobić element siatki przepełnić pojemnik z siatką jeśli jest to konieczne dla układu. Aby osiągnąć efekt przepełnienia, wystarczy użyj innego rozmiaru kolumny:
.grid-container display: grid; grid-template-areas: „left center right”; grid-template-columns: repeat (3, 150px); grid-gap: 5px;
The suma wielkości kolumny i przerwy jest większy niż szerokość pojemnika, co powoduje, że elementy siatki przepełniają swój kontener.
Elementy siatki pokrywają się
ZA element siatki może się nakładać (pełne lub częściowe pokrycie) kolejny element siatki w następujących przypadkach:
- Jest ustawiony tak, aby rozciągał się na (i ponad) komórkę (y) innej pozycji siatki.
- Jego rozmiar został zwiększony, powodując, że pokrywa się on z pobliskim elementem siatki.
- Jest przesuwany na inny element siatki.
Omówimy drugi i trzeci przypadek później, w “Rozmiar” i “W ruchu” Sekcje.
Najpierw zobaczmy pierwszy przypadek, gdy element siatki obejmuje inny.
Element siatki w środku ma rozpięty nad lewym, więc tylko dwa elementy są widoczne na ekranie.
.grid-center grid-area: center; kolumna grid: 1/3;
The kolumna siatki i rząd siatki nieruchomości przypisz linie siatki między którymi kolumna lub rząd muszą się zmieścić.
Na poniższym diagramie możesz zobaczyć, jak kolumna siatki: 1/3 Zasada CSS działa: kolumna środkowa rozciąga się między liniami siatki 1 i 3. W rezultacie środkowa kolumna pokrywa się z lewą.
Przenieś elementy siatki
To znaczy, ruszając się przesuwając przedmioty nieco dookoła. Jeśli całkowicie chcesz przenieść przedmiot do innej komórki / obszaru siatki, polecam zaktualizować kod tworzenia siatki.
Poruszanie się po elementach siatki jest proste. Właśnie Użyj margines, przekształcać, albo pozycja: względna; nieruchomości. Zobacz poniżej, jak elementy są przenoszone przy użyciu tych właściwości.
Elementy siatki środkowej i prawej można przesuwać (jak pokazano powyżej) w następujący sposób:
1. Korzystanie margines
Negatywne marginesy zwiększają wymiary elementów siatki, a dodatnie marginesy je przycinają. Używając kombinacji obu, możesz przesuwać elementy siatki dookoła.
.grid-center grid-area: center; margin-left: -10px; margines prawy: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; lewy margines: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Korzystanie przekształcać
The Tłumaczyć() Funkcja CSS przesuwa element wzdłuż osi X i Y.. Używanie go razem z przekształcać Właściwość pozwala zmienić pozycję elementu siatki.
.grid-center grid-area: center; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Korzystanie pozycja
Używając pozycja: względna; reguła z określonym Top, Dolny, lewo, i dobrze właściwości mogą być również używane do poruszania się po elementach siatki.
.grid-center grid-area: center; pozycja: względna; bottom: 10px; po prawej: 10px; .grid-right grid-area: right; pozycja: względna; bottom: 10px; lewo: 10px;
Zamów elementy siatki
Elementy siatki są renderowane na ekranie w kolejności, w jakiej pojawiają się w kodzie źródłowym HTML.
W poprzedniej sekcji, gdy element centralny został przesunięty w lewo, został umieszczony na górze lewego elementu przez przeglądarkę. Stało się tak, ponieważ w HTML, Możemy jednak zmień pozycje siatki zamówień używając Używając Podobnie jak w module układu siatki CSS, zmiana kolejności elementów w HTML nie wpływa na układ siatki, możesz też położyć Jeśli używasz automatycznych rozmiarów wierszy lub kolumn dla elementu siatki (używając Pamiętaj, że w naszej przykładowej siatce wszystkie trzy kolumny zajmują jedną frakcję ( Tutaj zmieniamy rozmiar lewego elementu używając Tutaj zmieniamy rozmiar lewego elementu używając indeks Z albo zamówienie Właściwości CSS.
indeks z: 1; reguła, lewy element siatki uzyskać wyższy kontekst stosu.. grid-left grid-area: left; indeks z: 1;
Rozmiary elementów siatki
automatyczny, fr, gr jednostek), zmniejszy się, aby zrobić miejsce na sąsiedni przedmiot, który powiększył się tylko, jeżeli powiedział przedmiot nie był wielkości przekształcać lub ujemny margines.fr) pojemnika z siatką. Spójrz, jak wyglądają wszystkie trzy elementy po zmianie rozmiaru lewego na dwa różne sposoby.1. Sized with
szerokość i wysokośćszerokość i wysokość nieruchomości. W rezultacie pozostaje wewnątrz pojemnika z siatką.
.grid-left grid-area: left; szerokość: 200px; wysokość: 90px;
2. Sized with
przekształcaćprzekształcać własność. W rezultacie przelewa się przez pojemnik i znika również luka w siatce.
.grid-left grid-area: left; transform: scalex (1.8);
