Exemplos práticos de layouts responsivos com CSS Grid

O CSS Grid Layout oferece um sistema poderoso para criar layouts estruturados e adaptáveis. Com o uso de media queries, é possível criar layouts responsivos que se ajustam automaticamente à largura da tela, orientação do dispositivo e resolução.

Exemplos

1. Layout de blog:

• Tela grande: Duas colunas, com posts na coluna principal e sidebar na coluna secundária.
• Tela pequena: Uma coluna, com posts empilhados.

HTML

<div class="container">
  <div class="main-content">
    <article class="post">
      <h1>Título do post 1</h1>
      <p>Conteúdo do post 1</p>
    </article>
    <article class="post">
      <h1>Título do post 2</h1>
      <p>Conteúdo do post 2</p>
    </article>
  </div>
  <div class="sidebar">
    <h2>Sidebar</h2>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
</div>

CSS

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

.main-content {
  grid-area: 1 / 1 / 2 / 2;
  
  @media (max-width: 768px) {
    grid-area: 1 / 1;
  }
}

.sidebar {
  grid-area: 1 / 2 / 2 / 3;
  
  @media (max-width: 768px) {
    display: none;
  }
}

2. Galeria de imagens:

• Tela grande: Três colunas, com imagens lado a lado.
• Tela pequena: Uma coluna, com imagens empilhadas.

HTML

<div class="container">
  <img src="image1.jpg" alt="Imagem 1">
  <img src="image2.jpg" alt="Imagem 2">
  <img src="image3.jpg" alt="Imagem 3">
</div>

CSS

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

3. Formulário de contato:

• Tela grande: Duas colunas, com campos do formulário na primeira coluna e informações de contato na segunda coluna.
• Tela pequena: Uma coluna, com campos do formulário empilhados.

HTML

<div class="container">
  <form action="#">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem"></textarea>
    <button type="submit">Enviar</button>
  </form>
  <div class="contact-info">
    <h2>Contato</h2>
    <p>Telefone: (11) 1234-5678</p>
    <p>Email: contato@exemplo.com</p>
  </div>
</div>

CSS

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

.form {
  grid-area: 1 / 1 / 2 / 2;
  
  @media (max-width: 768px) {
    grid-area: 1 / 1;
  }
}

.contact-info {
  grid-area: 1 / 2 / 2 / 3;
  
  @media (max-width: 768px)