O melhor tutorial Exemplos Fundação grade em 2024. Neste tutorial você pode aprender
Três colunas iguais,Três coluna desigual,Duas colunas iguais,Duas colunas desiguais,Modificar a ordem das colunas,Coluna nested,Misto: móvel, desktop,,Misto: celulares, tablets e dispositivos de desktop,A coluna do meio,coluna offset,coluna incompleta,widescreen,
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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "linha">
<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 = "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"> .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>
tente »
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:
Exemplos
<Style>
.Row {
max-width: 100%;
}
</ Style>
tente » 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 style = "background-color : Coral; padding: 25px;">
<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 »