grade bloco de fundação
grade enorme para compartilhamento de conteúdo página: por exemplo, uma linha para exibir quatro imagens, não importa o que é necessário a largura média da tela.
Você pode usar o <ul> elemento mais .small|medium|large-block-grid- num grid- num classe para criar grade maciça. num é o número utilizado para especificar a média:
Exemplos
<Class Ul = "small-block -grid-3">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
tente »
Outro exemplo, use parágrafo:
Exemplos
<Class Ul = "small-block -grid-3">
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
</ Ul>
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
<Li> <p> Apenas um exemplo simples de texto ... </ p> </ li>
</ Ul>
tente »
Exibir um número diferente de tamanhos diferentes
Ao adicionar vários blocos de grade de diferentes classes de tamanho pode ser configurado para exibir um número diferente de blocos:
Exemplos
<Ul class = "small-block -grid-2 de médio bloco-grid-3 grande bloco-grid-4">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
tente »