Ilustração de um homem criando um site e janelas de computador flutuando em torno dele
Freepik

Existem várias formas de tornar o HTML do seu site responsivo e capaz de se adaptar às resoluções de diferentes telas. Umas delas é usando a propriedade display com o valor grid, no CSS.

Os passos são bem simples:

  1. Defina o container do grid: Primeiro, defina o elemento container que irá conter seu grid usando a propriedade display: grid. Isso irá habilitar o layout do grid.
  2. Defina as colunas e linhas do grid: Em seguida, defina as colunas e linhas do grid usando as propriedades grid-template-columns e grid-template-rows. Essas propriedades permitem que você especifique quantas colunas e linhas o grid deve ter, bem como seu tamanho e espaçamento.
  3. Posicione os itens do grid: Após definir as colunas e linhas do grid, você pode posicionar os itens do grid usando as propriedades grid-column e grid-row. Essas propriedades permitem que você especifique em quais células seus itens devem ocupar.
  4. Use @media: Por fim, para tornar seu grid responsivo, você pode usar media queries para ajustar o layout do grid com base no tamanho da tela. Você pode usar a regra @media para definir diferentes propriedades do grid em diferentes pontos de quebra, como mudar o número de colunas ou seu tamanho.

Aqui está um exemplo de código que demonstra como criar um layout de grid responsivo simples:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Neste exemplo, o elemento .container é definido como display: grid e tem três colunas com um espaçamento de 20 pixels entre elas. Os elementos .item são posicionados dentro do grid usando as propriedades grid-column e grid-row.

Em seguida, duas media queries são usadas para ajustar o layout do grid em diferentes tamanhos de tela. Quando o tamanho da tela é menor ou igual a 768 pixels, o grid é definido para ter duas colunas em vez de três. E quando o tamanho da tela é menor ou igual a 480 pixels, o grid é definido para ter apenas uma coluna. Isso permite que o grid se adapte e permaneça responsivo em diferentes dispositivos e tamanhos de tela.