Łatwo twórz nowoczesne układy za pomocą Gridlex CSS Grid System

Rozwój frontendu radykalnie się poprawił wraz z wprowadzeniem Flexbox CSS. To znacznie ułatwia tworzyć siatki i kolumny to naturalnie zmieniające się układy.

Zamiast kodowania własnej siatki Flexbox od podstaw, znacznie łatwiej jest użyć narzędzia takiego jak Gridlex. Ta darmowa biblioteka Flexbox typu open source to super lekki i bardzo łatwy do dostosowania.

Wszystko co robisz to dodaj arkusz stylów Gridlex na twoją stronę i pracować z jego klasami siatki. Kolumny wewnętrzne zajmują klasę .przełęcz a ty pakujesz je wszystkie w .krata pojemnik. To definiuje każdą kolumnę na tej samej szerokości i tworzy jednolity interfejs.

To ustawienie domyślne może zostać nadpisany poprzez dodanie klasy wielkości do każdej kolumny. W ten sposób możesz mieć jedną kolumnę na 70% szerokości i inną kolumnę na 30% szerokości (np. Zawartość / pasek boczny).

Znajdziesz mnóstwo próbki siatki na stronie głównej Gridlex za pomocą pokazy na żywo i fragmenty kodu kopiować / wklejać do swojej witryny. To ogromna biblioteka z tak wieloma zajęcia opcjonalne aby pomóc Ci zbudować najprostsze siatki dla dowolnej strony internetowej.

Wszystkie siatki sumują się do a łącznie 12 mini-kolumn, więc możesz określić, ile miejsca powinna zajmować każda kolumna. Może się to wydawać mylące, ale ma sens, gdy zobaczysz prezentacje wizualne.

Tutaj jest przykład kodu używany do większej siatki o różnych szerokościach:

 
 
… 
 
… 
 
… 
 
 

Zauważ, że .krata klasa zawiera wszystko i kolumny próbują podzielony na 12 części (w przykładzie będzie to ⅓ szerokość dla każdego). Jednak stałe kolumny rozpiętość 2 i 6 kol odpowiednio, więc pierwsza kolumna używa automatycznej szerokości na podstawie tego, co zostało.

Korzystając z dwóch pozostałych kolumn, możemy wywnioskować, że pozostałyby 4 kolumny (12-6-2) trafić w sumie 12. To bardzo prosta matematyka, ale nazwy klas mogą być mylące. Gdy zaczniesz grać w Gridlex przy projekcie, szybko wybierzesz system nazewnictwa.

Gridlex jest obecnie w wersji 2.x i jego stale aktualizowany na GitHub. Wraz ze wzrostem obsługi przeglądarki gwarantowałbym większą uwagę na Flexbox, a więcej witryn dostosowało ten model do siatek stron.

Możesz nawet znaleźć pełna galeria stron internetowych, na których działa Gridlex, aby zobaczyć, jak wygląda to w przypadku witryn internetowych na żywo.

Jeśli nigdy wcześniej nie korzystałeś z Flexbox, Gridlex może być zabawną biblioteką do zabawy. Ale zalecam też najpierw ćwiczenie zabawnych gier flexbox, aby sprawdzić swoją wiedzę i pomóc zrozumieć podstawy.

Gridlex jest dostępne za darmo w repozytorium GitHub lub możesz go wyciągnąć przez npm lub bower. Oferuje pełna dokumentacja na stronie głównej, w tym pokazy dla kolumn o różnej szerokości i zapytań o media.

Ty masz pełna kontrola ponad projekt flexbox i tylko to zajmuje kilka klas CSS sprawić, aby się wydarzyło! A jeśli kiedykolwiek masz szybkie pytanie lub chcesz udostępnić witrynę zbudowaną za pomocą Gridlex, możesz wysłać wiadomość do twórcy na Twitterze @webdevlint.