Como criar um layout de site do Santo Graal usando CSS Grid
As instruções a seguir descrevem como implementar o layout do Santo Graal com CSS Grid.
Configuração básica
Crie um documento HTML mínimo. Em um editor de texto ou html, insira o código a seguir.
HTML mínimo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
Hello, world
</body>
</html>
Salve o arquivo como index.html.
Abra index.html em um navegador da web. Para abrir o arquivo em uma nova guia do navegador da web, pressione Ctrl+O (Comando+O no macOS) e selecione index.html. Você também pode arrastar e soltar index.html em uma janela do navegador.
CSS mínimo
Crie um novo arquivo de texto. No arquivo vazio, adicione o código a seguir.
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* root font size */
}
body {
margin: 0; /* no margin at edge of content */
height: 100%; /* 100% height of parent (html) element */
}
Salve esta folha de estilo como index.css no mesmo local que index.html.
A largura do elemento html é definida como 100% (do espaço horizontal disponível), para contabilizar a possibilidade de uma barra de rolagem vertical exibida. Se o elemento html for 100vw (100% da largura da janela de visualização), o conteúdo da página pode se estender sob e ser oculto pela barra de rolagem vertical.
Em index.html, adicione a seguinte linha no elemento
.<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
</head>
<body>
Hello, world
</body>
</html>
Recarregue index.html no navegador. Observe que o plano de fundo é cinza claro e o conteúdo “Olá, mundo” toca a borda superior esquerda da janela de visualização.
Defina a grade
Adicione as seguintes linhas a index.css.
Contêiner de grade CSS
div.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
O contêiner da grade é o elemento pai da grade. Seus atributos se aplicam a toda a grade.
A seguir está uma descrição dos estilos de contêiner de grade usados aqui.
| CSS | Descrição |
|---|---|
| div.container {estilo …} |
Aplique os estilos listados entre os colchetes a quaisquer elementos no HTML que tenham a classe de contêiner, por exemplo:
<div class="container ..."> O contêiner do nome da classe é arbitrário. |
| display: grade; |
Defina este elemento como o pai de uma nova grade. Todos os itens na grade são exibidos no limite da caixa deste elemento. |
| largura: 100%; altura: 100%; |
Defina o limite da caixa do elemento para 100% da largura e altura do elemento pai ( ). |
| colunas-modelo de grade: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr; |
Defina as três larguras de coluna padrão da grade, da esquerda para a direita, e as três alturas de linha padrão, de cima para baixo. A unidade fr (“unidade fracionária”) é especial para elementos CSS Grid. O valor de fr é calculado como a largura da grade (para colunas), ou a altura (para linhas), dividido pelo total de unidades fr solicitadas. Por exemplo, em uma grade de 300 pixels de largura com três colunas definidas como 1fr, 2fr e 3fr, as larguras das colunas são 50, 100 e 150 pixels. Uma coluna de nfr é sempre n vezes mais larga do que uma coluna de 1fr. Neste layout, o elemento central (o corpo principal) tem o dobro da largura (2fr) de cada painel e o triplo da altura (3fr) do cabeçalho e rodapé. Os painéis são 1 \/(1 + 2 + 1) = 1/4 da largura da grade. O cabeçalho e o rodapé são 1 \/(1 + 3 + 1) = 1/5 da altura da grade. |
| grid-template-areas: “cabeça cabeça cabeça” “panleft mainbody panright” “pé, pé, pé”; |
O atributo grid-template-areas consiste em uma série de strings entre aspas, uma para cada linha da grade. Cada string contém uma palavra por coluna na grade. Cada palavra é o nome da área da grade que ocupa aquela célula na grade. Se um nome é repetido, a área nomeada abrange essas células na grade. As células expandidas devem formar um retângulo. Nosso código CSS diz: “todas as três células na primeira linha constituem a área da grade principal. A próxima linha tem uma área chamada panleft na coluna esquerda, mainbody na coluna central e panright na coluna direita. Todas as três células de a linha inferior compõe a área denominada pé. “ Observe que as strings são delimitadas por um espaço ou nova linha, não por vírgula. |
Item de grade CSS
Cada item de grade ocupa uma área de grade nomeada. Uma área de grade é uma ou mais células adjacentes que formam um retângulo, conforme nomeado no modelo de contêiner de grade.
O layout do Santo Graal tem cinco áreas de grade: o cabeçalho (área principal), painel esquerdo (área panorâmica esquerda), corpo principal (área principal), painel direito (área panorâmica direita) e rodapé (área pé). Adicione as seguintes linhas a index.css no final do arquivo.
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
}
Salve index.css.
Elementos HTML de grade
Adicione cinco elementos
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main body</div>
<div class="panel right">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
Salve index.html. Recarregue index.html no navegador para testar a grade.
Redimensione a janela do navegador e as proporções da grade se adaptam ao tamanho da janela.
Definir o tamanho das áreas da grade
Atribua altura ao cabeçalho e rodapé e largura aos painéis.
Abra index.css e encontre essas duas linhas.
grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr;
Substitua-os pelas seguintes linhas:
grid-template-columns: 10rem auto 10rem; grid-template-rows: 5rem auto 5rem;
Salve index.css.
A largura padrão dos painéis laterais agora é 10 rem, e a altura padrão do cabeçalho e rodapé é 5 rem. O corpo principal (a área da grade central) é definido como automático, o que significa que as dimensões ocupam todo o espaço disponível.
A unidade rem (“root em”) é baseada no tamanho da fonte raiz do documento. Neste exemplo, ele é definido em index.css, no estilo de elemento html:
html {
...
font-size: 1.0em;
A unidade rem é igual a este valor em. Por exemplo, html {font-size: 1.2em; } escalaria todos os tamanhos expressos em rem em 120% de seu valor padrão.
O tamanho exato da unidade em depende da fonte. Como regra geral, 1em é equivalente a 16 pixels.
Recarregue index.html no navegador e redimensione a janela. O cabeçalho e o rodapé permanecem com uma altura fixa e os painéis permanecem com uma largura fixa.
Definir escala móvel
As páginas da web modernas devem ser projetadas para dispositivos móveis primeiro, o que significa que o design deve priorizar sua aparência em dispositivos móveis.
Usando ferramentas de desenvolvedor de navegador, o documento pode ser visualizado como se estivesse em um dispositivo móvel.
No Chrome, pressione Ctrl+Mudança+eue clique no botão Alternar dispositivo da barra de ferramentas.
No Firefox, pressione Ctrl+Mudança+Oe clique no botão Modo de design responsivo.
Por padrão, a escala é muito pequena no celular.
Para tornar o texto legível em dispositivos móveis, adicione esta linha no elemento
de index.html.<meta name="viewport" content="width=device-width, initial-scale=1">
Esta linha informa ao navegador para ajustar a escala de acordo com o dispositivo que está visualizando a página.
Recarregue a visualização móvel.
O texto escalado é mais legível, consistente com um navegador de desktop.
No entanto, existe um novo problema. Os painéis de largura fixa estão “comprimindo” o corpo principal. No modo retrato em um dispositivo móvel, não há espaço para painéis. As etapas nas seções a seguir resolvem esse problema.
Torne-o responsivo
Ao definir o modelo de grade, nomes podem ser atribuídos às linhas de grade.
As linhas de grade formam os limites de cada linha e coluna, incluindo a borda da grade. Uma grade com x colunas ey linhas tem x + 1 linhas de coluna, y + 1 linhas de linha ex + y + 2 linhas de grade totais.
Atualmente, nossa grade se parece com o diagrama a seguir.
A grade contém três colunas, definidas por seus tamanhos de coluna.
grid-template-columns: 10rem auto 10rem;
Opcionalmente, esta definição também pode conter nomes de linha.
Atribuir nomes de linhas de grade
Na definição do modelo, os nomes das linhas são colocados entre colchetes. Eles podem ser especificados antes, entre ou depois de um valor de tamanho.
Em index.css, altere o valor de grid-template-columns para o seguinte.
grid-template-columns: [left] 10rem auto 10rem [right];
Os nomes esquerdo e direito agora se referem às linhas de limite verticais da grade.
Esses nomes podem redefinir a borda de uma área de grade, conforme descrito na próxima seção.
CSS condicional com consulta de mídia
Uma consulta de mídia é um bloco CSS condicional criado com a palavra-chave CSS @media. Os estilos em um bloco @media são aplicados apenas quando as condições especificadas sobre o dispositivo de visualização são verdadeiras.
As consultas de mídia podem aplicar estilos com base no tamanho da janela de visualização, portanto, se o usuário redimensionar a janela do navegador ou girar o telefone, o CSS responde de acordo.
A forma geral de uma consulta de mídia é:
@media media-type and (media-feature-rule) {
style ...
}
Adicione a seguinte consulta de mídia ao final de index.css.
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
Salve index.css. Recarregue index.html no navegador e redimensione a janela. Quando a janela se torna mais estreita do que 50 rem (aproximadamente 800 pixels), os painéis desaparecem e o corpo principal se expande para abranger todas as três colunas.
Em dispositivos móveis, os painéis são exibidos apenas no modo paisagem.
Quando o dispositivo móvel é girado para o modo retrato, os painéis ficam ocultos e o corpo principal ocupa a largura do dispositivo.
CSS e HTML finais
O CSS final adiciona três recursos adicionais.
- O contêiner da grade tem uma altura mínima, evitando que o rodapé e o cabeçalho sejam totalmente recolhidos.
- A largura do elemento do corpo principal é fixa, evitando que o conteúdo do corpo reflua.
- O elemento mainbody é justificado ao centro em sua área de grade.
Index.css final
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* our root font size */
}
body {
margin: 0; /* content goes to edge of viewport */
height: 100vh; /* and spans height of viewport */
}
div.container {
min-height: 25rem; /* mainbody height never squishes < 25rem */
display: grid;
width: 100%;
height: 100%;
grid-template-columns:
[left] 10rem auto 10rem [right];
grid-template-rows:
[top] 5rem auto 5rem [bottom];
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
width: 30rem; /* mainbody width is fixed *\/justify-self: center; /* and always centered in grid area */
}
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
Index.html final
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main Body</div>
<div class="panel right content">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
0 Comments