Fundacja - The Grid

Opis

System siatki fundamentów skaluje do 12 kolumn na stronie. Systemy siatki służą do tworzenia układów stron za pomocą szeregu wierszy i kolumn, w których znajdują się treści.

Opcje siatki

Poniższa tabela zawiera krótkie omówienie sposobu działania systemu siatki Foundation w wielu urządzeniach.

	Małe urządzenia Telefony (<640 pikseli)	Średnie urządzenia Tablety (> = 640 pikseli)	Duże urządzenia Laptopy i komputery stacjonarne (> = 1200 pikseli)
Zachowanie siatki	Poziomy przez cały czas	Początek zwinięty, poziomo nad punktami przerwania	Początek zwinięty, poziomo nad punktami przerwania
Prefiks klasy	.mały-*	.średni-*	.duży-*
Liczba kolumn	12	12	12
Gniazdo	tak	tak	tak
Przesunięcia	tak	tak	tak
Kolejność kolumn	tak	tak	tak

Podstawowa struktura siatki fundamentowej

Poniżej przedstawiono podstawową strukturę siatki fundamentowej -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• Najpierw utwórz klasę wierszy, aby utworzyć poziome grupy kolumn.

• Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.

• Kolumny siatki tworzy się, określając liczbę dwunastu dostępnych kolumn, które chcesz rozciągnąć. Na przykład dla czterech równych kolumn użylibyśmy .large-3

Poniżej przedstawiono trzy klasy używane w systemie siatki Fundacji -

Sr.No.	Podstawowe klasy i opis siatki
1	Duży W wielkokwiatowych * Klasy służy do dużych urządzeń.
2	Średni Średnio- * klasa służy do urządzeń średnich.
3	Mały klasa small- * jest używana dla małych urządzeń.

Advanced Grid

Poniżej przedstawiono zaawansowane formaty siatki używane w programie Foundation.

Sr.No.	Zaawansowane siatki i opis
1	Połączona kolumna / wiersz Do kolumn i wierszy klasy są używane na tym samym elemencie, aby uzyskać pełną szerokość kolumny do użycia jako pojemnik.
2	Zagnieżdżanie Możemy zagnieżdżać kolumny siatki wewnątrz innych kolumn.
3	Przesunięcia Używając klasy large-offset- * lub small-offset- * , możesz przesuwać kolumny w prawo.
4	Niekompletne wiersze Fundament automatycznie przesuwa ostatni element w prawo, gdy wiersze nie zawierają kolumn do 12.
5	Zwiń / Rozwiń wiersze Przy użyciu rozmiaru zapytania o media klasy collapse i uncollapse są dołączane do elementu row, aby pokazać dopełnienia.
6	Wyśrodkowane kolumny Włączając klasę do małej wyśrodkowanej kolumny, możesz ustawić kolumnę w środku.
7	Zamawianie źródła Klasa porządkowania źródła służy do przesuwania kolumn między punktem przerwania.
8	Siatki blokowe Siatka bloków służy do podziału zawartości.

Budowanie semantycznie

Korzystając z zestawu mikserów SASS, generowany jest CSS siatki, który jest używany do budowania własnej siatki semantycznej. Aby uzyskać więcej informacji, kliknij tutaj

SASS Reference

Poniżej przedstawiono odniesienie SASS dla siatki używanej w programie Foundation.

Sr.No.	Podstawowe siatki i opis
1	Zmienne Używając zmiennych sass możemy modyfikować domyślne style tego komponentu.
2	Mieszanki Końcowe wyjście CSS jest budowane przy użyciu miksera.