Grid.css - minimalny system gridowy dla programistów internetowych

Większe frameworki takie jak Bootstrap pochodzą z ich własne ustawienia siatki. Ale oni też przyjdź z dużą ilością bagażu w postaci wstępnie zaprojektowanych elementów strony i komponentów JavaScript.

Jeśli szukasz znacznie mniejszego i usprawnionego systemu siatki, pokochasz Grid.css.

Ta bezpłatna biblioteka open source jest dostarczana wraz z tradycyjną System siatki 12-kolowej które możesz ułożyć dla dowolnego układu. CSS jest naprawdę łatwy w użyciu i sam plik mierzy tylko 560 bajtów (to pół KB!)

Rozpoczęcie pracy jest bardzo proste i po prostu potrzebujesz jeden plik CSS dodane do twojego nagłówka.

Możesz znaleźć bezpośredni link do pobrania na stronie głównej Grid.css lub w oficjalnym repozytorium GitHub. Możesz nawet użyć surowa wersja CDN aby osadzić ten plik bezpośrednio z GitHub bez samodzielnego hostowania.

Teraz możesz skonfigurować strukturę swojej kolumny używając dowolnych elementów (divy, sekcje itp.).

Zazwyczaj obejmuje to .rząd element (pojemnik) wraz z wieloma wewnętrzne elementy kolumny. Klasy kolumn używaj liczb aby zdefiniować ich całkowitą przestrzeń wewnątrz kontenera, na przykład, .col4 zajmuje cztery kolumny z dwunastu.

Oto przykładowy urywek z dema:

Możesz użyć dowolnej kombinacji klas kolumn, które tylko chcesz dodaj do 12.

Oznacza to, że możesz także zrestrukturyzuj stronę jak chcesz, używając różne pojemniki rzędowe. Na przykład, możesz mieć jeden duży zakres nagłówka, ale użyj dwóch różnych konfiguracji wiersza / kolumny dla treści strony.

Oczywiście ta biblioteka jest 100% za darmo i otwarte źródło, więc możesz dowolnie edytować.

Twórca Ahmed Tarek, także zrobił Butns który jest wariantem wielu dostępnych przycisków interfejsu użytkownika. To ładnie łączy się z Grid.css, więc obydwie są znakomitymi bibliotekami, które można wybrać podczas uruchamiania nowego projektu internetowego.