Criar um layout responsivo com grade CSS

Sep 14, 2025

Como

Layout de grade CSS. Está crescendo no suporte ao navegador todos os dias e podemos enviar grade CSS para a produção. A rápida adoção da grade CSS foi verdadeiramente notável.

Antes de chegarmos a fazer um layout de site de portfólio responsivo com grade CSS, vamos limpar algumas coisas: CSS Grid não é um substituto para Flexbox. . Não é nem um substituto para flutuadores. Na verdade, você pode perceber que estamos usando flexbox para fazer coisas que a grade CSS faz muito melhor. Mas em vez de pensar em termos de substituição, podemos pensar em termos de combinação.

15 Tutoriais de design responsivos realmente úteis

Imagine uma manteiga de amendoim e sanduíche de geléia. Manteiga de amendoim e geléia são muito grandes por conta própria, mas quando se reúnem, uma coisa nova é nascida e a magia acontece.

Isto é o que o nosso layout do site Ferramentas são como. Eles são ótimos para as coisas que fazem individualmente, mas quando são combinados, a magia acontece e podemos criar layouts novos e emocionantes. Neste caso, faremos um desenvolvimento de web PB & AMP; J do nosso próprio com grade CSS e Flexbox. Quer simplificar ainda mais o seu processo? Escolha um decente Construtor de sites .

01. Configure sua marcação

case study title repeated — Nosso layout não parece muito, mas o esqueleto com nossos seis itens está no lugar

Neste tutorial, vamos usar o CSS Grid e Flexbox juntos para criar um layout de portfólio responsivo. Cada uma dessas caixas é um tamanho diferente, algumas delas abrem as linhas e cada caixa tem um título que fica no fundo. Nós usaremos algumas das grandes ferramentas de alinhamento que vêm com Flexbox para fazer isso acontecer.

Vamos começar a configurar nossa marcação.

 & lt; ul class = "caixas" & gt;
  & lt; li & gt;
    & lt; div class = "boxes__text-wrapper" & gt;
      & lt; H2 & GT; Título do estudo de caso & lt; / h2 & gt;
      & lt; p & gt; uma descrição cativante para o nosso estudo de caso. Nós trabalhamos duro. & Lt; / p & gt;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

Vamos duplicar esse item de lista e tudo nele seis vezes, então temos itens para brincar. Caso você esteja se perguntando, decidimos usar o ul. elemento aqui porque esta é uma lista de entradas. Sinta-se à vontade para usar o que quer certo para você.

Dentro do item da lista, temos um divã com a classe de .boxes__text-wrapper que conterá o título do estudo de caso e sua descrição de acompanhamento.

02. Escreva estilos de base

case study title with different styling — Nós definimos nossa fonte para algo um pouco mais agradável e removido a margem padrão de títulos e parágrafos

Agora vamos definir alguns estilos de base para trabalhar.

 corpo {
  Fonte-família: Avenir, Sans-Serif;
  Margem: 2rem Auto;
  Largura: 95%;
}
H2,
p {
  Margem: 0;
}
ul {
  Estilo de lista: nenhum;
  preenchimento: 0;
  Margem: 0;
}
.boxes & gt; * {
  preenchimento: .5rem;
  fundo-cor: # 333;
  cor branca;
}

Nós mudamos a fonte para ser Avenir. Removeremos a margem do nosso cabeçalho e parágrafo e redefinirá a lista não ordenada. Também vamos dar a cada lista de itens alguns estilos padrão para nos ajudar a ver onde cada um deles é.

03. Configure sua grade

case study title with gaps between them — Com apenas três linhas, adicionamos uma sarjeta entre nossos itens de grade e os fizemos um pouco mais alto

Queremos construir nosso layout para celular primeiro. Configurando nossa grade em pequenas telas é tão fácil quanto isso:

 .boxes {
  Exibir: grade;
  Grade-Auto-Linhas: MinMax (125px, Auto);
  Gap de grade: .5rem;
}

Grade irá empilhar nossos itens em cima um do outro porque, por padrão, há apenas uma coluna. Nós vamos criar algum espaço entre cada estudo de caso usando Gap de grade - Isso nos permite adicionar uma calha entre linhas e colunas.

Esqueça adicionando uma margem a colunas apenas para precisar de complexo nth-filho seletores; calhas aparecem apenas entre colunas ou linhas, nunca depois ou antes de uma coluna ou Row.grid-gap. é a taquotha de Gap de grade-column e lacuna de grade . Normalmente, usaríamos o Longhand, mas vamos sobrescrever os dois como o navegador crescer, então vamos usar a taquigrafia.

Em seguida, vamos usar grade-auto-linhas para contar nosso recipiente de grade a altura de novas linhas. A Grid criará novas linhas para colocar todo o nosso conteúdo. Nós podemos controlar o tamanho dessas linhas criadas automaticamente com o grade-auto-linhas propriedade. Estamos usando uma nova função disponível para nós: mínimo máximo() . Com mínimo máximo() Podemos especificar um tamanho mínimo e um tamanho máximo.

Com o nosso código estamos dizendo que queremos que nossas linhas sejam um mínimo de 120px e um máximo de auto. Estamos usando automaticamente aqui porque queremos que nossas linhas crescem se o conteúdo o garante.

04. Configurar compatibilidade de navegador grande

case study title in a row — Nossa grade está tomando forma! Temos seis colunas para trabalhar e menos sarjeta entre nossos itens de grade

Vamos configurar nossa página para que, quando nosso navegador for 40E ou maior, nosso contêiner de grade possui seis colunas de uma fração cada.

 @media Tela e (largura mínima: 40em) {
  .boxes {
    Colunas de Grade-Template: Repita (6, 1fr);
    Gap de grade: 2px;
  }
}

Colunas de Grade-Template é a propriedade que usamos para dizer nossa grade quantas colunas devem existir. Aceita todas as unidades de comprimento que conhecemos e amamos como REM. , em. , px. , porcentagens, vw. , vh. e pe .

O pe é uma nova unidade que recebemos com layout de grade CSS. Com ele, podemos dizer ao navegador para fazer matemática em vez de nós - excelente.

Ao dizer ao navegador para criar seis colunas de uma fração, o navegador calculará a largura do nosso recipiente de grade e dividi-lo em seis colunas iguais. Além disso, porque a grade é inteligente, só vai dividir o espaço depois de calcular a sarjeta que especificamos.

05. Estilo itens individuais

case study title with an image behind — O café faz tudo parecer melhor, não é? Também o gradiente sutil faz com que nosso título e descrição se destacam

Nossos estudos de caso parecem um pouco monótonos como apenas caixas cinzentas. Vamos adicionar uma imagem de fundo, obter nossos títulos para exibir na parte inferior dessas caixas e adicionar um gradiente para que nosso título se destaque.

 .boxes li {
  imagem de fundo:
    gradiente linear (RGBA (0,0,0,0,0), RGBA (0,0,0,0 0,0,0 0,8)),
    URL (caminho / para / imagem);
  Fundo de tamanho: capa;
  Exibir: flex;
  alinhar-itens: flex-end;
}

Esta imagem de fundo era uma imagem livre de Unsplash. , mas sinta-se à vontade para usar qualquer imagem que você gostaria. Eu também estou trazendo flexbox na mistura para alinhar nosso texto para a parte inferior das nossas caixas. Você não vai ver isso ainda, mas como colocamos cada caixa diferente, você acabará por ver o trabalho.

06. Coloque itens na grade

case study title with one image above and five below — A grade facilita o tamanho dos nossos itens de grade no entanto, gostaríamos. Mas este é apenas o começo

Infelizmente, a grade não tem uma maneira de colocar automaticamente itens no layout de grade que vimos no começo. Felizmente para nós, no entanto, a grade nos dá as ferramentas para fazê-lo manualmente facilmente. Neste tutorial, usaremos o NTH-filho para colocar cada item de lista. Em um site de produção, aconselhamos usar uma classe que, dado o planejamento correto, poderia permitir automatizar layouts como este em um site pesado de conteúdo.

Vamos começar com nosso primeiro item.

 @media Tela e (largura mínima: 40em) {
  .boxes li: nth-criança (1) {
    Coluna de grade: 1 / -1;
    linha de grade: span 3;
  }
}

Estaremos colocando todos os nossos estilos de colocação dentro dessa consulta de mídia que escrevemos anteriormente porque queremos que esse layout aconteça depois que nosso navegador é de 40 e maior. Com nth-filho Estamos segmentando o primeiro item de lista. O CSS Grid nos permite colocar facilmente nossos itens com coluna de grade e linha de grade. Existem muitas maneiras diferentes de especificar onde os itens devem ser, mas aqui estamos dizendo ao nosso item para começar na linha da coluna e abrangem todo o contêiner com -1.

Então, com linha de grade, estamos dizendo ao item para abranger três linhas. Como sabemos que três linhas serão o tamanho que queremos? Bem, especificamos o tamanho dessas linhas com grade-auto-linhas alguns momentos atrás, e se não estamos felizes com eles, podemos alterar o tamanho mínimo.

Vamos colocar o resto dos nossos itens.

tela @media e (largura mínima: 40em) {
  .boxes li: nth-criança (2) {
    Coluna de grade: Span 2;
    linha de grade: span 7;
  }

  .boxes li: nth-criança (3) {
    Coluna de grade: Span 4;
    linha de grade: span 3;
  }

  .boxes li: nth-filho (4) {
    Coluna de grade: Span 2;
    Grade-Row: Span 4;
  }

  .boxes li: nth-criança (5),
  .boxes li: nth-filho (6) {
    Coluna de grade: Span 2;
    Grade-Row: Span 2;
  }
}

Não é incrível quanto layout de grade de controle nos dá? Com apenas algumas linhas de código, podemos montar um layout completamente responsivo que não quebrará se mais itens forem adicionados.

Claro, eles podem parecer um pouco nítidos porque eles só pegarão uma coluna de grade e linha por padrão, mas não quebra nosso layout. Se estivéssemos fazendo isso com flutuadores e larguras e alturas fixas, estaríamos em uma ligação se mais conteúdo fosse adicionado.

finished layout with different images in different places — Nosso layout acabado! Isso não é incrível? Grade nos permite colocar nossos itens facilmente em duas dimensões

Um rápido de lado sobre navegadores mais antigos

OK, é hora de resolver o elefante na sala. 'E quanto aos navegadores mais antigos?' A resposta a essa pergunta é a mesma que é para qualquer novo recurso no CSS: use consultas de recurso e abraçam a cascata. Queries de recurso são Muito bem suportado e onde eles não podemos colocar nosso fallback primeiro. Por exemplo, escreveríamos algo ao longo das linhas de:

. Seu seletor {
  Exibir: flex;
}

/ * Seu código de grade * /
@supports (display: grade) {
  Exibir: grade;
  Colunas de Grade-Template: Repita (3, 1fr);
  Gap de grade: 1rem 2rem;
}

Escrever nosso código dessa maneira significa que, se o navegador entender o layout de grade, ele usará isso em vez de Flexbox. Além disso, porque estamos abraçando a cascata, os navegadores que não entendem consultas de recursos irão ignorá-los e já terá as informações necessárias. Podemos precisar planejar como escrevemos nossos estilos um pouco mais do que o habitual, mas ao fazê-lo, podemos criar layouts de aparência excelente com fallbacks sensíveis. Se você quiser salvar suas páginas antigas, exporte-as como PDFs e salve-as em armazenamento na núvem .

Além disso, com o passar do tempo, só haverá mais e mais suporte para a grade CSS. Basta pensar como seria ótimo delete mais tarde nossos falsos e deixar todos os CSS relacionados à grade. Ao aprender mais sobre Grade, você perceberá que muitas coisas fazemos agora com muitas linhas de CSS. Lembre-se, se você tem um site particularmente complexo, seu hospedagem na web. O serviço deve estar de acordo com o zero.

Este artigo originalmente apareceu em Revista Net. , a principal revista do mundo para desenvolvedores e web designers. Inscreva-se aqui .

Consulte Mais informação:

Segredos de layout de grade CSS revelados
30 ferramentas de design web para acelerar o seu fluxo de trabalho
Moda layouts flexíveis com grade CSS

Criar um layout responsivo com grade CSS

01. Configure sua marcação

02. Escreva estilos de base

03. Configure sua grade

04. Configurar compatibilidade de navegador grande

05. Estilo itens individuais

06. Coloque itens na grade

Um rápido de lado sobre navegadores mais antigos

Como - Artigos mais populares

Construa um portal do cliente com o WordPress

Como adicionar animação ao SVG com CSS

Construa layouts adaptativos sem consultas de mídia

Criar um cavaleiro de fantasia realista

Criar um chuveiro de meteoro em 3ds max

Como criar o cabelo no cinema 4D

usando ferramentas vetoriais: uma abordagem de uma web designer

O segredo para pintar como Monet

Categorias