 |
|
Você está aqui: CSS ::: Dicas & Truques ::: CSS Grid Layout |
Curso de CSS para iniciantes - Como usar o Grid Layout do CSSQuantidade de visualizações: 577 vezes |
|
Antes da chegada do Grid Layout os designers web sofreram muito para distribuir os elementos das páginas web. No início não tínhamos distribuição nenhuma, ou seja, o conteúdo da página era distribuído de acordo com o gosto do navegador. Depois tivemos os layouts usando tabelas, e em seguida os layouts usando os recursos de float. O Grid Layout do CSS se aproxima muito das interfaces gráficas que usamos em linguagens de programação e frameworks tais como o Java Swing, o Python Qt, Python TKinter, wxPython, etc. Este tipo de layout nos permite especificar a linha e coluna nas quais um determinado componente será colocado. O primeiro passo para usar o Grid Layout do CSS é eleger o elemento no qual os demais componentes serão colocados. É este elemento pai que receberá o valor grid para a propriedade display. Em seguida a quantidade de colunas é definida usando-se a propriedade grid-template-columns, enquanto a quantidade de linhas é definida usando-se grid-template-rows. Veja um página HTML completa na qual temos uma DIV que serve como grid para três outras DIVs. As DIVs filhas possuem cores de fundo diferente para que você veja as colunas e linhas ocupadas por cada uma:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
#container {
/* define o display como grid */
display: grid;
/* três colunas */
grid-template-columns: 200px 200px 200px;
/* duas linhas */
grid-template-rows: 150px 150px;
}
#primeiro {
/* começa na coluna 1; pega três colunas; */
grid-column: 1 / span 3;
/* começa na linha 1; pega uma linha; */
grid-row: 1 / span 1;
background-color: red;
}
#segundo {
/* começa na coluna 1; pega duas colunas; */
grid-column: 1 / span 2;
/* começa na linha 2; pega uma linha; */
grid-row: 2 / span 1;
background-color: blue;
}
#terceiro {
/* começa na coluna 3; pega uma coluna; */
grid-column: 3 / span 1;
/* começa na linha 2; pega uma linha; */
grid-row: 2 / span 1;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="primeiro">Primeiro Elemento</div>
<div id="segundo">Segundo Elemento</div>
<div id="terceiro">Terceiro Elemento</div>
</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
Python - Como calcular o cateto oposto dadas as medidas da hipotenusa e do cateto adjascente em Python |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
