Construa um blog com grade e flexbox

Sep 14, 2025
Como
Build a blog with Grid and flexbox

Os últimos dois a três anos viram layout avançar em trancos e limites. Agora que essas técnicas modernas têm um resultado tão consistente em navegadores modernos, você realmente pode usá-los para o seu código de produção. Se você está se perguntando Como começar um blog , este tutorial mostrará o quão simples é criar um layout padrão do estilo do blog usando o Módulo CSS Grid e flexível da caixa, também conhecido como flexbox. Som como muito trabalho duro para o que você quer? Dê uma olhada no nosso guia para o Melhores plataformas de blogs grátis ou escolha um top Construtor de sites . Trabalhando com uma equipe? Implante o melhor armazenamento na núvem para manter o processo suave.

Primeiro, vamos recapitular rapidamente sobre o básico do HTML e por que é bom tentar escrever código semântico.

Mais que desktop e celular

Você notou o modo leitor no Safari e no Firefox? É um ícone na barra de endereços que parece um pouco como papel forrado. Isso vai tornar o seu layout do site Em um modo de ossos sem distração, bem como dispositivos como o uso do Apple Watch. Mais e mais dispositivos estão acessando e exibindo o conteúdo da Web - possivelmente, o grande sucesso do Natal era alto-falantes interativos como o eco amazônico.

Com estes em mente, e, claro, a necessidade de seu site funcionar nos leitores de tela e similares, a estrutura da sua página é crucial. Se você acabou de usar & lt; div & gt; Para todos os seus recipientes e até mesmo botões, os dispositivos que rendem seu código não saberão qual é o contexto e, portanto, não pode usar nenhuma funcionalidade ou recursos nativos.

01. Inicie o layout de página básico

Vamos construir uma página básica para incluir um cabeçalho com navegação, um bloco de herói, artigo principal, blocos de artigos em destaque e rodapé. A ideia aqui é ver muitos web design responsivo Técnicas Podemos implementar sem usar consultas de mídia ou qualquer javascript assistente. Você pode ver que o HTML da página é dividido em seções distintas usando tags HTML5. Também adicionamos aulas a eles, como navegadores mais antigos não saberão o que são e os tornam como div. Vamos começar no topo da página e trabalhar em nosso caminho. No entanto, seu site básico ou complexo, também é hora de pensar em qual hospedagem na web. O serviço é certo para você.

02. Construa um cabeçalho do site

Build a blog with Grid and flexbox: Site header

Você não precisará de nenhum invólucro ou recipientes para este cabeçalho

O cabeçalho do site contém um logotipo e uma lista não ordenada para a navegação. Não precisamos adicionar nenhum invólucro ou recipientes para colocar isso com o logotipo à esquerda e na navegação para a direita em uma única linha. 

 & lt; Cabeçalho Classe = "Header" & GT;

& lt; img src = "imagens / logotipo.png" / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; a href = "#"
classe = "ativo" & gt; home & lt; / a & gt; & lt; / lt & gt;
& lt; li & gt; & lt; a href = "#" & gt; about & lt; / a & gt; & lt; / lt; / lt;
& lt; li & gt; e lt; a href = "#" & gt; os cães e lt; / a & gt; & lt; / lt; / li & gt;
& lt; li & gt; e lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / lt & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / header & gt;

03. Use a unidade fr

Nós definimos o cabeçalho para exibir grade e depois usar 'Get-temple-colunas' para definir duas colunas no cabeçalho. Nós usamos o pe Unidade aqui, que é uma unidade fracionária - 1fr igualaria o espaço disponível no recipiente. Neste caso, estamos dando a navegação uma área ligeiramente menor para preencher. 

 cabeçalho {
Exibir: Grade;
colunas de grade-modelo: 1.5fr 1fr;
alinhar-artigos: centro;
}

04. Adicionar navegação no site

Agora, nós segmamos a lista de itens de menu. Novamente nós girando o & lt; ul & gt; em um recipiente de grade e informe os itens dentro da AutoFit em colunas. Aqui nós usamos mínimo máximo Para garantir que as colunas nunca possam ser menores que 100px, mas se o espaço for maior, eles poderão compartilhar o espaço como 1FR. 

 .nav {
Exibir: Grade;
Colunas de Grade-Template: Repita (Auto-Fit, MinMax (100PX, 1FR));
Gap de grade: 10px;
alinhar-artigos: centro;
}

05. Criar bloco herói

Build a blog with Grid and flexbox: Hero block

Centrando o texto do herói é muito mais fácil com grade CSS ou flex

A próxima parte da página é o bloco principal do herói. Tradicionalmente, o texto de centralização vertical em um recipiente exigia todos os tipos de trabalho. Usando o CSS Grid ou Flex, isso é realmente simples. 

 & lt; Artigo & GT;
& lt; section class = "herói" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" "& gt; & lt; / a & gt;
& lt; / seção & gt;
& lt; / artigo e gt;

06. Alinhar ao centro

Alinhamento em dois eixos é uma parte do pão e da manteiga de grade CSS. Aqui, podemos transformar o contêiner de herói em um recipiente de grade e depois usar alinhamento de conteúdo (da esquerda para a direita) e justificar-conteúdo (de cima para baixo) para posicionar no centro. Estamos usando um vh. unidade aqui, que fará com que o herói bloqueie 50% da altura da viewport. 

 .HERO {
Altura mínima: 50vh;
Exibir: Grade;
Justifique-os itens: centro;
Alinhar-conteúdo: centro;
justificar-conteúdo: centro;
}

07. Crie a seção principal de conteúdo

O artigo principal também tem um bloco à direita que contém mais leitura. Para tornar isso responsivo sem ter que fazer uso de uma consulta de mídia, podemos mudar para Flexbox para aproveitar ao máximo suas propriedades. 

 & lt; classis class = "Conteúdo principal" & gt;
& lt; seção / & gt;
& lt; / seção & gt;
& lt; à parte / & gt;
& lt; / artigo e gt;

08. Adicione uma exibição de duas colunas

Defina o artigo para um recipiente flexível. Adicione um pouco de preenchimento à esquerda e à direita para garantir que a medida do texto não fique muito longa. A direção flexível é a linha para que a seção e de lado dentro se sentaremos ao lado do outro quando estilos. O conteúdo é justificado ao espaço entre para que o texto não se retiga contra o lado. 

 Conteúdo principal {
Exibir: flex;
Flex-Wrap: Enrole;
Flex-Direção: linha;
justificar-conteúdo: espaço-entre;
Padding: 0 5VW 0 5VW;}

09. torná-lo responsivo sem consultas de mídia

Build a blog with Grid and flexbox: Responsive without media queries

Crie uma seção responsiva sem ter que usar consultas de mídia

A seção usa uma mistura inteligente de cálculos e larguras mínimas e máximas para nos dar o que é efetivamente uma consulta de mídia, mas em um nível de contêiner. Quando há espaço suficiente, a seção ocupará 70% do pai, permitindo que o lado se sente ao lado dele. Ao usar o CALC para a largura, podemos retornar uma largura enorme ou minúscula. 

 seção de conteúdo principal {
largura mínima: 70%;
Largura: Calc ((48EM - 100%) * 1000);
Largura máxima: 100%;
}

10. Defina um ponto de pausa

48EM equivale a 768px (16px * Tamanho da fonte base (16px)) de modo acima de 768px A seção será sua largura mínima de 70% e abaixo de 768 a largura máxima será usada. Fazemos o mesmo para o aparte, então, neste caso, ocupará 25% em grandes telas ou 100% em pequenos. O efeito é um ponto de ruptura responsivo que afeta puramente o recipiente. 

. Mão-Conteúdo de lado {
largura mínima: 25%;
Largura: Calc ((48EM - 100%) * 1000);
Largura máxima: 100%;
}

11. Construa blocos responsivos

Build a blog with Grid and flexbox: Responsive blocks

Use divs do contêiner para construir seus blocos responsivos

Para criar os itens em destaque que correm pela página, finalmente usamos nosso primeiro recipiente divs. 

 & lt; section class = "List-List" & GT;
& lt; div classe = "cartão" & gt;
& lt; img / & gt;
& lt; div classe = "Detalhes do cartão" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / seção & gt;

12. Repita e autofit

Para a nossa lista de cartões, queremos ter quatro seguidas, mas porque não estamos usando nenhuma consulta de mídia que colocamos nosso mínimo máximo valor para 300px, que se encaixará bem em um pequeno celular. Ao usar repetir e autofit, o navegador faz o trabalho duro e encaixará o que ele pode entrar em uma linha e, em seguida, iniciar outro, para que possamos ir de quatro até um único layout de coluna com uma linha de código. 

 .card-list {
Exibir: Grade;
Gap de grade: 10px;
Colunas de Grade-Template: Repetição (Auto-Fit,
minmax (300px, 1fr));
}

.Card {
 Exibir: grade;
 colunas de grade-modelo: 1fr;
}

13. Crie um layout de cartão

Para obter detalhes no cartão, voltamos para Flex, definindo o fluxo para a coluna para que os itens fluam verticalmente. Colocou o justificar-conteúdo Propriedade para se adequar - neste caso espaço-uniformemente funciona bem. Como a tag 'A' neste painel exibirá o bloco, ele estenderá a largura do contêiner. Defina para Flex-Start. de modo que só ocupa o espaço de seu conteúdo. 

 .Card-detalhes {
Exibir: flex;
Direção Flex: Coluna;
justificar-conteúdo: espaço-uniformemente;
}

.Card-detalhes a {
alinhar-self: flex-start;
}

14. Estilo o rodapé

Estamos até o rodapé, e apenas empregará alguns dos estilos que usamos anteriormente para colocá-lo. 

 & lt; classe classe = "rodapé" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul classe = "social" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / rodapé & gt;

15. Alinhe o item filho

Existem três áreas neste rodapé. Defina suas colunas de grade para repetir três em uma unidade fracionária cada. Você poderia simplesmente escrever 'colunas de grade-template: 1fr 1fr 1fr;' se você preferir. Os ícones sociais vão se sentar alinhados à direita - você pode fazer isso dizendo ao item em si para alinhar o direito usando justificar-self . 

 .footer {
Exibir: Grade;
Colunas de Grade-Template: Repita (3, 1fr);
Grade-Auto-Fluxo: Coluna;
alinhar-artigos: centro;
}

.Social {
justificar-si: fim;
}

16. Considere a compatibilidade

Embora este tutorial funcione bem através dos três grandes navegadores e dispositivos modernos, ele não foi testado de volta para o IE. Dependendo do seu projeto, você pode usar o aprimoramento progressivo e servir um layout simples. Se o seu CSS for criado usando um pré-processador como Sass, o pacote de autoprefixer fornece alguns dos prefixos extras necessários para os gostos de borda.

Este artigo foi originalmente publicado em questão 284 da revista Creative Web Design Web designer . Comprar edição 284 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

  • Um guia abrangente para usar a grade CSS
  • Use o CSS Grid e o Flexbox para construir uma interface responsiva
  • 5 Geradores de Grade CSS Cool CSS

Como - Artigos mais populares

Como fazer um meme no Photoshop

Como Sep 14, 2025

(Crédito da imagem: Matt Smith) Você quer saber como fazer um meme no Photoshop? Este guia está aqui para ajudar. ..

Como fazer uma captura de tela em um Mac

Como Sep 14, 2025

(Crédito da imagem: Bloq criativo) Se você quiser capturar uma tela inteira, uma janela ou apenas uma parte selecio..

Como configurar um ambiente de desenvolvimento local

Como Sep 14, 2025

(Crédito da imagem: futuro) Um ambiente de desenvolvimento local permite que você use sua própria máquina para ex..

Use WordPress como um CMS sem cabeça

Como Sep 14, 2025

Eu ouvi pela primeira vez sobre a abordagem CMS sem cabeça em uma palestra que assisti das cidades gêmeas Drupal. Eu gostei da ..

Entendendo a propriedade de exibição CSS

Como Sep 14, 2025

É meia-noite, e aquele divã Em seu site ainda se parece com o peito de brinquedo de uma criança. Todos os eleme..

4 dicas para desenvolver suas habilidades de desenvolvedor

Como Sep 14, 2025

(Crédito de imagem: Robert Pizzo) Diretor Superfriendly Dan Mall estará compartilhando suas dicas ..

Como fazer seus próprios quadros de lona

Como Sep 14, 2025

Fazer suas próprias placas de lona é divertida, rápida e pode economizar dinheiro. Também oferece um produto superior e a fle..

Como criar cabelo com estilo mangá em movimento

Como Sep 14, 2025

Aprendendo Como desenhar mangá não é feito fácil. Então, para facilitar o máximo possível, sigo um simples processo passo a passo que usa movimento, forma, cor, ilumina�..

Categorias