Exemplos Fundação grade
Abaixo temos recolhido alguns exemplos de grade comum.
Três colunas iguais
Este exemplo demonstra como criar três colunas iguais (33,3% / 33,3% / 33,3%), mostrando três colunas sobre os equipamentos de médio e grande escala, empilhamento automático em pequenos dispositivos:
Exemplos
<Div class = "média-4 colunas" style = "background-color: amarelo;">
<P> .medium-4 </ p>
</ Div>
<Div class = "média-4 colunas" style = "background-color: rosa;">
<P> .medium-4 </ p>
</ Div>
<Div class = "média-4 colunas" style = "background-color: amarelo;">
<P> .medium-4 </ p>
</ Div>
</ Div>
tente »
Três coluna desigual
Este exemplo demonstra como criar três desigual coluna (25% / 50% / 25%), mostrando três colunas sobre o equipamento de forma e em grande escala, de empilhamento automático em dispositivos pequenos:
Exemplos
<Div class = "média-3 colunas" style = "background-color: amarelo;">
<P> .medium-3 </ p>
</ Div>
<Div class = "média-6 colunas" style = "background-color: rosa;">
<P> .medium-6 </ p>
</ Div>
<Div class = "média-3 colunas" style = "background-color: amarelo;">
<P> .medium-3 </ p>
</ Div>
</ Div>
tente »
Duas colunas iguais
Este exemplo demonstra como criar duas colunas iguais (50% / 50%), a proporção de pequeno, médio e equipamentos de grande porte é sempre superior a 50% / 50%:
Exemplos
<Div class = "small-6 colunas" style = "background-color: amarelo;">
<P> .small-6 </ p>
</ Div>
<Div class = "small-6 colunas" style = "background-color: rosa;">
<P> .small-6 </ p>
</ Div>
</ Div>
tente »
Duas colunas desiguais
Este exemplo demonstra como criar duas colunas desiguais (33,3% / 66,6%), a proporção de pequenas, médias e grandes equipamentos é sempre superior a 33,3% / 66,6%:
Exemplos
<Div class = "pequenos-8 colunas" style = "background-color: amarelo;">
<P> .small-8 </ p>
</ Div>
<Div class = "small-4 colunas" style = "background-color: rosa;">
<P> .small-4 </ p>
</ Div>
</ Div>
tente »
Modificar a ordem das colunas
Usando .small|medium|large-push-* e .small|medium|large-pull-* classe para modificar a ordem das colunas:
Exemplos
<Div class = "pequenos-4 colunas-8-empurra pequeno" style = "background-color: amarelo;">
<P> .small-4 .small- 8-push </ p>
</ Div>
<Div class = "pequenos-8 colunas pequeno-4-pull" style = "background-color: rosa;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>
tente »
Coluna nested
Você pode usar grades aninhadas (coluna Inserir coluna):
Exemplos
<Div class = "pequenos-8 colunas"> .small-8
<Div class = "linha">
<Div class = "pequenos-8 colunas"> .small-8 Nested
<Div class = "linha">
<Div class = "pequenos-8 colunas"> .small-8 Nested Novamente </ div>
<Div class = "small-4 colunas"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 colunas"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 colunas"> .small-4 </ div>
</ Div>
tente »
Misto: móvel, desktop,
sistema de rede Foundation tem três colunas: .small-* (telefone celular), .medium-* (flat), e .large-* (desktop). Essas classes podem ser usados dinamicamente em combinação, fazer o layout mais flexível:
Dica: Cada classe pode ser ampliada, se desejar que a largura do dispositivo de tela pequena e grande pode ser ajustado conforme especificado .small-* .
Exemplos
<Div class = "pequenos-6 grandes-8 colunas"> .small-6 .large-8 </ div>
<Div class = "pequenos-6 grandes-4 colunas"> .small-6 .large-4 </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-2 grandes-4 colunas"> .small-2 .large-2 </ div>
<Div class = "pequenos-4 grandes-4 colunas"> .small-4 .large-2 </ div>
<Div class = "pequenos-6 grandes-4 colunas"> .small-6 .large-2 </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-3 grandes-5 colunas"> .small-3 .large-5 </ div>
<Div class = "pequenos-9 grandes-7 colunas"> .small-9 .large-7 </ div>
</ Div>
tente »
Misto: celulares, tablets e dispositivos de desktop
Exemplos
<Div class = "médio-6 grandes-8 colunas"> .medium-6 .large-8 </ div>
<Div class = "médio-6 grandes-4 colunas"> .medium-6 .large-4 </ div>
</ Div>
<Div class = "linha">
<Div class = "pequeno-4 médias-3 grandes 7-colunas"> .small-4 .medium-3 .large-7 </ div>
<Div class = "pequeno-4 médias-6 grandes 3-colunas"> .small-4 .medium-6 .large-3 </ div>
<Div class = "pequeno-4 médias-3 grandes 2-colunas"> .small-4 .medium-3 .large-2 </ div>
</ Div>
tente »
A coluna do meio
Você pode usar a coluna central .small-centered classe. Médio e equipamentos de grande porte pode ser herdada centrado pequenos dispositivos, mas você precisa para definir a classe está centrada em grandes equipamentos .large-centered .
Exemplos
<Div class = "pequenos-4 colunas pequenas centrado"> pequeno-4 pequena centrado </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-6 colunas pequenas centrado"> pequeno-6 pequeno-centrado </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-6 colunas grandes centrado"> pequeno-6 em larga centrado </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-8 colunas de grande uncentered pequenos-centrado"> pequeno-8 pequena centrada em grande uncentered </ div>
</ Div>
<Div class = "linha">
<Div class = "pequenos-10 colunas pequenas centrado"> pequeno-10 pequeno-centrado </ div>
</ Div>
tente »
coluna offset
Você pode usar .large-offset-* (ou .small-offset-* ) classe, definir a coluna para a direita. O número de colunas sobre a margem esquerda do controle usando um asterisco:
Exemplos
<Div class = "grandes-1 colunas"> 1 </ div>
<Div class = "large-11 colunas"> 11 </ div>
</ Div>
<Div class = "linha">
<Div class = "grandes-1 colunas"> 1 </ div>
<Div class = "grandes-10 grandes-offset-1 colunas"> 10, offset 1 </ div>
</ Div>
<Div class = "linha">
<Div class = "grandes-1 colunas"> 1 </ div>
<Div class = "grandes-9 grandes offset-2 colunas"> 9, offset 2 </ div>
</ Div>
<Div class = "linha">
<Div class = "grandes-1 colunas"> 1 </ div>
<Div class = "grandes-8 grandes offset-3 colunas"> 8, offset 3 </ div>
</ Div>
tente »
coluna incompleta
Se o número de coluna da linha e não 12, Fundação será automaticamente o último a bóia à direita e um espaço em branco para preencher as colunas restantes.
Opções .end categoria de elemento para o último set para o flutuador esquerdo:
Exemplos
<div class = "média-3 colunas"> .medium-3 </ div>
<div class = "média-3 colunas"> .medium-3 </ div>
<div class = "média-3 colunas"> .medium-3 </ div>
</ Div>
<Div class = "linha">
<div class = "média-3 colunas"> .medium-3 </ div>
<div class = "média-3 colunas"> .medium-3 </ div>
<Div class = "média-3 colunas acabar"> .medium-3 .end </ div>
</ Div>
widescreen
Grid ( .row ) Tamanho máximo (max-width) é 62.5rem. Em Widescreen tamanho pode ser maior do que 62.5rem, esta coluna não será preenchimento completo da página, ainda que a largura é definida como 100%. Mas podemos definir um novo max-width via CSS:
Se você quiser usar o padrão max-width, mas a cor de página inteira entre fundo, então você usar no elemento contentor .row classe, e você precisa especificar uma cor de fundo:
Exemplos
<Div class = "linha">
<Div class = "small-6 colunas" style = "background-color: amarelo;"> .small-6 </ div>
<Div class = "small-6 colunas" style = "background-color: rosa;"> .small-6 </ div>
</ Div>
</ Div>
tente »