 |
|
|
 Planilha de Dimensionamento de Tubulações
Hidráulicas Água Fria e Água Quente CompletaNossa planilha automática de dimensionamento de tubulações de água fria e quente é uma ferramenta desenvolvida para auxiliar engenheiros e projetistas no cálculo rápido e preciso das redes hidráulicas de edificaçoes. Por meio da inserçao de dados como vazao, diâmetro da tubulaçao, comprimento da rede, material do tubo e coeficientes hidráulicos, a planilha realiza automaticamente os cálculos necessários para verificar velocidade da água, perda de carga e dimensionamento adequado das tubulaçoes. |
||
Você está aqui: CSS ::: Dicas & Truques ::: CSS Grid Layout |
Curso de CSS para iniciantes - Como usar o Grid Layout do CSSQuantidade de visualizações: 712 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 |
|
JavaScript - Como remover todos os espaços de uma string em JavaScript usando uma função personalizada remover_espacos() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
