Fundação - The Grid

Descrição

O sistema de grade de base pode ser dimensionado em até 12 colunas na página. Os sistemas de grade são usados ​​para criar layouts de página por meio de uma série de linhas e colunas que hospedam seu conteúdo.

Opções de grade

A tabela a seguir descreve brevemente como o sistema de grade Foundation funciona em vários dispositivos.

	Aparelhos pequenos telefones (<640px)	Tablets para dispositivos médios (> = 640px)	Dispositivos grandes, laptops e desktops (> = 1200 px)
Comportamento de grade	Sempre horizontal	Recolhido para começar, horizontal acima dos pontos de interrupção	Recolhido para começar, horizontal acima dos pontos de interrupção
Prefixo de classe	.pequeno-*	.médio-*	.ampla-*
Numero de colunas	12	12	12
Nestable	sim	sim	sim
Offsets	sim	sim	sim
Ordem de coluna	sim	sim	sim

Estrutura Básica de uma Grade de Fundação

A seguir está a estrutura básica de uma grade de Fundação -

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

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

• Primeiro, crie uma classe de linha para criar grupos horizontais de colunas.

• O conteúdo deve ser colocado dentro das colunas e apenas as colunas podem ser filhos imediatos das linhas.

• As colunas da grade são criadas especificando-se o número de doze colunas disponíveis que você deseja expandir. Por exemplo, para quatro colunas iguais, usaríamos .large-3

A seguir estão as três classes usadas no sistema de grade da Fundação -

Sr. Não.	Classes de grade básica e descrição
1	ampla As classes large- * são usadas para os dispositivos grandes.
2	Médio A classe medium- * é usada para dispositivos médios.
3	Pequeno a classe small- * é usada para dispositivos pequenos.

Grade Avançada

A seguir estão os formatos de grade avançados usados ​​no Foundation.

Sr. Não.	Grades e descrição avançadas
1	Coluna / linha combinada As classes de coluna e linha são usadas no mesmo elemento para obter a coluna de largura total para usar como um contêiner.
2	Nesting Podemos aninhar as colunas da grade dentro de outras colunas.
3	Offsets Usando a classe large-offset- * ou small-offset- * , você pode mover as colunas para a direita.
4	Linhas Incompletas A fundação flutua o último elemento automaticamente para a direita quando as linhas não incluem colunas de até 12.
5	Recolher / Desfazer Recolher Linhas Usando o tamanho da consulta de mídia, as classes de recolhimento e não recolhimento são incluídas no elemento de linha para mostrar os preenchimentos.
6	Colunas Centradas Incluindo a classe com centro pequeno na coluna, você pode fazer a coluna no centro.
7	Ordem de fonte A classe de ordenação de origem é usada para deslocar as colunas entre o ponto de interrupção.
8	Blocos de grades A grade de blocos é usada para dividir o conteúdo.

Construindo Semanticamente

Usando o conjunto de mixins SASS, uma grade CSS é gerada, a qual é usada para construir sua própria grade semântica. Para mais informações clique aqui

Referência SASS

A seguir estão as referências SASS para grade usada no Foundation.

Sr. Não.	Grades básicas e descrição
1	Variáveis Usando as variáveis ​​sass, podemos modificar os estilos padrão deste componente.
2	Mixins A saída CSS final é construída usando o mixin.