Como criar um layout simples com layouts de grade CSS

Se você já se interessou por design de impressão, sabe de onde surgiu a ideia dos layouts de grade. Uma grade é uma ferramenta de medição precisa usada para posicionar elementos de design em uma página. Essa ideia é frequentemente usada na Web para tornar o conteúdo organizado e uniforme, melhorando a experiência de visualização dos usuários.

Quando a prática do web design era nova, os layouts eram bem simples. Cabeçalho, barra lateral, área de conteúdo e rodapé. Agora, com a evolução da Web, nossos layouts se tornaram mais complexos e temos muito mais a enfrentar como web designers. Muitas vezes, precisamos de várias regiões de conteúdo, design responsivo, vários designs de modelo de layout de página, entre muitas outras coisas. E para implementar o design e exibi-lo corretamente, flutuações e posicionamento são necessários. Floats parecem simples, mas às vezes podem ser complicados de se trabalhar.

Felizmente, a grade fornece uma maneira mais fácil de projetar e exibir o conteúdo da web. É um ótimo momento para ser um designer porque os layouts de grade CSS estão ganhando força rapidamente. Pode parecer que as grades têm sido uma nova ideia no design da web nos últimos anos, mas acredite ou não, os CSS Grid Layouts estão em andamento há muitos anos. O suporte do navegador para eles aconteceu muito rapidamente, então agora eles podem ajudar a aliviar parte da frustração em relação ao posicionamento com a qual os designers tiveram que lidar por muitos anos.

Finalmente chegou a hora de entrar na grade e explorar as novas possibilidades de design!

Suporte à Grade CSS

Tudo depende dos navegadores que você precisa oferecer suporte, mas há uma boa chance de você não precisar se preocupar com o “modo sinalizador” ao usar CSS Grids. Você sempre pode visitar a documentação Posso usar para verificar novamente, mas o suporte para CSS Grids aumentou drasticamente e muitos designers podem usá-lo na produção, o que é motivo de comemoração!

Noções básicas de layout de grade CSS

Ao utilizar CSS, os layouts de grade ajudarão a definir áreas de conteúdo em sua página da web. Há um conjunto relativamente novo de propriedades definidas nas especificações de layout de grade CSS. Este é um ótimo recurso para referência ao aprender mais sobre esta nova forma de design de layout. Os layouts de grade CSS ajudam a simplificar as coisas e facilitam a criação de layouts. Pense na grade como uma estrutura onde as medidas podem ser definidas.

Partes da Rede

Linhas

Neste caso, existem cinco linhas verticais e três linhas horizontais. As linhas recebem números a partir de um. As linhas verticais são mostradas da esquerda para a direita neste exemplo, mas isso depende da direção da escrita. Como isso mostra a leitura da esquerda para a direita, se for da direita para a esquerda, as coisas serão invertidas. As linhas podem receber nomes (opcional), o que ajuda a fazer referência a elas em CSS.

Faixas

Uma trilha é o espaço entre duas linhas paralelas. No diagrama, há quatro trilhos verticais e dois trilhos horizontais. Há um grande esforço duplo entre linhas e pistas. As linhas são uma ótima maneira de referenciar onde o conteúdo começa e termina. As faixas são onde o conteúdo realmente vai.

Células

As células são encontradas onde uma trilha horizontal e uma vertical se encontram. Há oito células no diagrama.

Áreas

As células entram em jogo ao especificar áreas. Uma área é uma forma retangular que pode abranger várias células. Assim como as linhas, as áreas podem ser nomeadas opcionalmente. Existem alguns rótulos incluídos no diagrama: “A”, “B” e “C”.

Criando um layout de grade

Pode ser útil esboçar as coisas antes de iniciar o layout. Não há substituto para o bom e velho papel quadriculado.

HTML para a grade

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

O recipiente é muito importante. Dentro do contêiner estão os diferentes blocos de conteúdo para o site. A ordem dos itens da grade dentro do contêiner não importa. Em seguida, usaremos CSS para colocá-los em nosso layout.

Estilos CSS

Depois de terminar a marcação HTML, a declaração mais importante é feita no CSS. Dentro do contêiner, você precisa aplicar display:grid ou display:inline-grid . Use display:grid se desejar uma grade em nível de bloco. Use display:inline-grid para grades de nível inline.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

As propriedades grid-template-columns e grid-template-rows são usadas para especificar a largura das linhas e colunas. As grid-template-columns foram definidas como 1fr e 3fr. É aqui que a grade está tomando forma com as unidades fracionárias. Com esses valores, é aparente que há duas colunas e elas não têm a mesma largura. A coluna definida para 3fr é três vezes mais larga que a outra. Isso explica como a barra lateral parece mais estreita do que a área de conteúdo.

Existem personalizações responsivas que podem ser feitas, mas usar as unidades fracionárias é um ótimo primeiro passo. O espaçamento entre as áreas pode ser controlado com grid-column-gamp e grid-row-gap .

As coisas parecem bem apertadas, mas com mais algumas especificações, as coisas vão tomar forma.

Este exemplo começa com a colocação do cabeçalho, mas os elementos podem ser colocados na ordem que for melhor para você. Se você quiser começar com o rodapé, isso também funcionará.

Vamos começar com o cabeçalho, que vai da linha de coluna 1 à linha de coluna 4 e da linha de linha 1 à linha de linha 2. O CSS ficará assim:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Você pode notar que a barra lateral está comprimida e não podemos vê-la muito. Teremos que fazer uma pequena reorganização. Neste layout, referenciar as linhas para obter o posicionamento ajudará no arranjo. As linhas funcionam como as diretrizes. O cabeçalho está localizado entre a linha na linha um e a linha na linha dois. Para a barra lateral, ela começará na linha três e terminará na linha seis. A linha de cabeçalho terminou em dois, então isso será colocado logo abaixo dela. Para ver o exemplo, veja o projeto no Codepen.

Usamos grid-column-start para especificar a linha vertical inicial para um elemento. Nesse caso, seria definido como três. O grid-column-end indica a linha vertical final de um elemento. Nesse caso, essa propriedade seria igual a quatro. Outros valores de linha também serão definidos da mesma maneira. O posicionamento da barra lateral está lá, apenas coberto pela área de conteúdo.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

O conteúdo principal começa na coluna três e termina na coluna quatro. A parte superior da barra lateral e a área de conteúdo são iguais, portanto, ambas têm um grid-row-start de três. Você pode estar se perguntando como o conteúdo e a barra lateral são muito mais altos. Ao colocar uma altura no container, neste caso 400px, ele agora é mais alto que os outros elementos.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

As duas últimas áreas de conteúdo são a área de conteúdo extra e o rodapé.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

As declarações de fim e início podem ser escritas com mais eficiência. Você pode ver grid-column-start: 1; e grid-column-end: 3; escrito em taquigrafia. Isso se pareceria com grid-column: 1 / 3; . Essa mesma ideia pode ser usada para declarar informações de linha de coluna.

Vantagens responsivas

Agora que um layout foi criado, parece muito “desktop”. E os tablets e dispositivos móveis? Layouts de grade CSS funcionam bem com consultas de mídia para que o design possa se adaptar a diferentes tamanhos de tela. O que é realmente legal é que você pode alterar as áreas de conteúdo nesses diferentes pontos de interrupção de consulta de mídia. Como designer, isso significa que você escolhe o que é melhor para seu layout em diferentes pontos de interrupção. Por exemplo, se você deseja que o “conteúdo extra” seja colocado acima da área “conteúdo”, pode especificar as colunas e linhas corretas.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Ao fazer com que as colunas comecem em um e terminem em quatro, tornamos as áreas de conteúdo com largura total. As linhas da grade são colocadas de forma que o “conteúdo extra” agora esteja acima do “conteúdo”.

Ferramenta do navegador para CSS Grid Layout

À medida que você projeta layouts ou inspeciona outros sites, o Firefox oferece uma ótima ferramenta para trabalhar com CSS Grid Layouts. Chama-se CSS Grid Playground e torna o exame da grade muito intuitivo. Ao acessar o inspetor, há uma opção na guia de layout para ver visualmente como a grade é construída. Isso tornará o processo de design mais fácil ter essa ferramenta para explorar como as diferentes propriedades da grade afetam o layout e o design geral da grade.

Os layouts de grade CSS são uma maneira nova e empolgante de criar layouts da web. Como você pode ver, é muito fácil começar a criar um layout de página simples. Este exemplo simples é uma boa base para criar layouts mais complexos. Como isso ganha popularidade, haverá uma vantagem para essa tecnologia ao projetar para vários dispositivos e pontos de interrupção com as personalizações de layout que podem ser feitas.