Jak utworzyć układ karty za pomocą układu siatki CSS

Nota redaktora: Ten gościnny wpis został napisany przez Abbey Fitzgerald, inżyniera oprogramowania UX i projektanta stron internetowych, który uwielbia sztukę tworzenia kodu.

Układy siatki CSS zmieniają sposób pracy projektantów stron internetowych, umożliwiając bardziej efektywny sposób układania zawartości witryny.

Długo na to oczekiwano, ale w końcu to podejście naprawdę przyjęło się iw wielu przypadkach jest w fazie produkcyjnej. Zrewolucjonizował sposób projektowania stron internetowych, a gdy projektanci go opanują, zapewni większą elastyczność układom stron internetowych.

Jeśli próbowałeś projektować za pomocą CSS Grid i przejrzałeś samouczki w Internecie, być może znalazłeś informacje dotyczące ogólnego podejścia do układu. Rzeczy takie jak: nagłówek, treść, stopka itp.

Jednak CSS Grid może być również przydatny w przypadku innych szczegółów witryny, takich jak karty. Układy kart są powszechnym sposobem wyświetlania treści i można je wydajnie tworzyć za pomocą CSS Grid. Dzięki tej metodzie obszary zawartości karty są łatwo powtarzalne, można je przeglądać na wielu różnych typach urządzeń, a rozmiar można łatwo kontrolować.

Narzędzia układu siatki CSS

Idąc dalej, będziesz chciał sprawdzić rzeczy na stronie. Firefox ma świetne narzędzia programistyczne do wyświetlania obszarów siatki. Korzystając z narzędzi programistycznych Firefoksa, możesz zobaczyć nakładkę przedstawiającą siatkę. Firefox Developer Edition ma również tę możliwość.

Wybierz siatkę nakładek, którą chcesz wyświetlić (w zależności od projektu może być więcej niż jedna). Ustawienia wyświetlania siatki pozwalają przyjrzeć się bliżej, wyświetlając numer linii, nazwy obszarów i sposób, w jaki linie mają się rozciągać. Będzie to pomocne podczas projektowania.

Proste karty z układem siatki CSS

Jeśli jesteś nowy w CSS Grid, będziesz chciał odświeżyć podstawy i stworzyć prosty układ siatki CSS. Karty to świetny sposób na wyświetlanie treści, a także ciekawy element interfejsu użytkownika, który jest intuicyjny w obsłudze. Zapewniają również użytkownikom doskonały format do szybkiego przeglądania treści i angażowania się w to, co ich najbardziej interesuje. Karty umożliwiają również projektantom formatowanie treści w atrakcyjny wizualnie sposób, z doskonałymi obrazami, treścią wprowadzającą, linkami i nie tylko!

Karty i ogólny układ strony

Nawiasem mówiąc, ważne jest, aby wiedzieć, że CSS Grid nie musi być używany w całym układzie strony. W razie potrzeby w niektórych obszarach strony można zastosować siatki. Ponieważ jest to samouczek dotyczący układów kart, metoda siatki może być stosowana wyłącznie tutaj, nawet jeśli reszta strony nie wykorzystuje CSS Grid. Tak długo, jak obszar siatki jest zdefiniowany i display: grid; jest zadeklarowany na opakowaniu, można zastosować to podejście.

Praca z ustaloną liczbą kart

W niektórych przypadkach łatwo jest zaplanować określoną liczbę kart. Przy określonej ilości zawartości liczba kart pozostanie taka sama. Na przykład mogą istnieć cztery karty wyjaśniające oferty biznesowe, z których każda znajduje się na osobnej karcie.

W tym przykładzie (i innych) wszystkie elementy .card znajdują się w elemencie kontenera .cards . Aby to osiągnąć, jest to dość proste.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Ważne jest, aby wyświetlić wartość .cards do siatki. Bez tego nie można utworzyć obszarów siatki. Następnym krokiem jest zdefiniowanie grid-template-columns i wybranie stylizacji. Rzeczywisty styl karty zostanie zadeklarowany z klasą .card .

W tym przykładzie zobaczysz wiele tagów artykułów z klasą .card . Zobacz na Codepen.

Powtórz dla Ustaw liczbę kart

W tym miejscu karty zaczynają nabierać kształtu. Aby utworzyć płynną liczbę kolumn w wierszu, funkcja repeat jest używana z funkcją repeat() . Ta funkcja przyjmuje dwa argumenty: liczbę powtórzeń i wartość do powtórzenia.

Na przykład grid-template-columns: repeat(3, 200px); oblicza do grid-template-columns: 200px 200px 200px; .

Jednostka ułamkowa

Zobaczysz, że przykładowy kod używa „fr”. Co to jest dokładnie? Ta jednostka miary stała się popularna w CSS Grid. Fr oznacza „jednostkę ułamkową”, a 1fr zajmuje 1 część dostępnej przestrzeni. Pomaga uprościć obliczenia przestrzenne.

Jednostki ułamkowe mogą być używane samodzielnie lub pozwalają określić szerokość 1fr , a także dodawać elementy potomne. Wiele fr będzie równo dzielonych na wszystkie elementy podrzędne.

Można określić różne jednostki ułamkowe. Na przykład, gdy kolumny siatki to 1fr 2fr 1fr , dwie jednostki ułamkowe zajmują dwa razy więcej miejsca niż jedna jednostka ułamkowa.

Powtórz dla dynamicznej liczby kart

W niektórych przypadkach możesz nie znać liczby potrzebnych kart, więc planowanie określonej liczby nie zadziała. Zostanie zastosowane to samo podejście, co w przypadku powtarzania, ale istnieje możliwość dopasowania dowolnej liczby za pomocą automatycznego wypełniania.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Deklaracje szerokości są potrzebne oprócz auto-fill . Pamiętaj, że przy wartości piksela może być miejsce po prawej stronie, gdy nie ma wystarczająco dużo miejsca, aby zmieściła się karta, ale tak nie musi być, jak zobaczysz nieco później.

Minmax dla większej kontroli nad szerokością karty

Minmax to idealne rozwiązanie, ponieważ sama jednostka ułamkowa sprawi, że karty będą miały pełną szerokość. Dodanie zarówno powtórzenia, jak i minmax do deklaracji stylu pozbędzie się możliwej pustej przestrzeni, a karty będą wyglądać bardziej płynnie.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Kolumny zawsze będą pasować do siatki, a karty będą miały co najmniej 200 pikseli. Kiedy minimalna przestrzeń nie pasuje idealnie do przestrzeni, w grę wchodzi maksymalna szerokość. Gdy kolejna karta o szerokości 200 pikseli się nie zmieści, inne karty będą większe niż 200 pikseli, więc rozciągną się, aby wypełnić rząd większą przestrzenią i zostaną równomiernie rozłożone. [identyfikator artykułu=”21612″ wyrównanie=”prawo”]

mobilny

Skoro zaplanowane zostały najmniejsze i największe karty, to dobry moment, aby porozmawiać o urządzeniach mobilnych. Karty działają dobrze na większych i mniejszych urządzeniach, ponieważ zawartość jest podzielona na łatwe do strawienia fragmenty, a karty można łatwo skalować w górę iw dół. CSS Grid pomaga stworzyć doskonałe środowisko mobilne, aw niektórych przypadkach jest to znacznie łatwiejsze niż osobne zapytanie o media.

W tym przykładzie karty muszą zostać zmniejszone, aby zmieściły się na urządzeniu mobilnym, a powiększone, aby zajmowały ułamek dostępnego miejsca, dzięki czemu będą wyświetlane w pełnej szerokości na mniejszym urządzeniu, bez potrzeby osobnego zapytania o media:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

Minimalna szerokość karty to 300px. W rzędzie pojawi się tyle kart 300px, które się zmieszczą. Gdy urządzenie jest bardzo małe, istnieje duże prawdopodobieństwo, że nie będzie miejsca na dwie karty w rzędzie. Wtedy do gry wchodzi 1fr . Jednostka ułamkowa doskonale nadaje się do responsywnych projektów. Kiedy dwie z 300-pikselowych kart nie pasują, widok mobilny staje się bardzo widoczny. Kiedy 1fr zostanie zadeklarowane jako maksymalna szerokość, pojedyncza karta zajmie całe dostępne miejsce i będą układać się jedna na drugiej.

Przerwa w siatce

Teraz, gdy szerokość kart jest ustalona, ​​​​należy podjąć decyzję o pozostawieniu odstępu między nimi. Ta właściwość jest dostępna w kontenerach siatki i ułatwia tworzenie rynien w projekcie. Grid-column-gap tworzy przestrzeń między każdą kartą. Kiedy widzisz grid-gap , odnosi się to do skrótu dla grid-row-gap i grid-column-gap . Grid-row-gap to przestrzeń na górze i na dole karty, grid-column-gap to przestrzeń po lewej i prawej stronie karty.

Zasoby układu siatki CSS

Jeśli chodzi o układy siatki CSS, można się wiele nauczyć i istnieje wiele możliwości. Najlepszym sposobem na poznanie CSS Grid Layout jest dodatkowe czytanie i eksperymentowanie. Istnieje wiele świetnych zasobów, ale oto kilka na początek:

• Siatka według przykładu
• Kurs CSS Grid Layout od Wesa Bosa
• Wprowadzenie Mozilli do CSS Grid