Modelo CSS: Layout de Duas Colunas (25% / 75%)

📝 Aplicação

Este modelo é útil para criar um layout dividido com 25% de largura à esquerda e 75% à direita. Perfeito para navegação + conteúdo ou menu + conteúdo.

📘 Explicação

Com display: flex;, os elementos são dispostos lado a lado. flex: 0 0 25% define a largura da coluna esquerda, enquanto flex: 1 faz a coluna direita ocupar o restante do espaço.

✅ Demonstração

Coluna Esquerda (25%)

Coluna Direita (75%)

📄 Código (parcial)

<style>
.two-column-container {
  display: flex;
  gap: 1rem;
}
.left-column {
  flex: 0 0 25%;
  background-color: #f0f0f0;
  padding: 1rem;
}
.right-column {
  flex: 1;
  background-color: #ffffff;
  padding: 1rem;
  border-left: 1px solid #ccc;
}
</style>

<div class="two-column-container">
  <div class="left-column">Coluna Esquerda (25%)</div>
  <div class="right-column">Coluna Direita (75%)</div>
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Layout com Duas Colunas</title>
  <style>
    .two-column-container {
      display: flex;
      gap: 1rem;
    }
    .left-column {
      flex: 0 0 25%;
      background-color: #f0f0f0;
      padding: 1rem;
    }
    .right-column {
      flex: 1;
      background-color: #ffffff;
      padding: 1rem;
      border-left: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="two-column-container">
    <div class="left-column">Coluna Esquerda (25%)</div>
    <div class="right-column">Coluna Direita (75%)</div>
  </div>
</body>
</html>

Copiado!

🧩 Dicas para aplicação e personalização

Este layout de duas colunas é ideal para dividir o conteúdo entre seções à esquerda e à direita. Especificamente, o uso de flex: 0 0 25% permite fixar a largura da coluna da esquerda, enquanto a da direita se expande de forma flexível. É perfeito para estruturas como barra lateral + conteúdo principal.

Para torná-lo responsivo em dispositivos móveis, é recomendável usar media queries. Por exemplo, aplicar @media (max-width: 768px) com flex-direction: column; transforma o layout em uma pilha vertical, melhorando a usabilidade em telas pequenas.

Em termos de estilo, gap ajuda a manter um espaçamento natural entre as colunas, sendo mais prático do que ajustar margin manualmente. Além disso, adicionar border-left à coluna da direita cria uma separação visual clara entre as áreas.

🔧 Considerações na implementação

Dependendo da quantidade de conteúdo, uma das colunas pode ficar mais alta que a outra. Nesses casos, usar align-items: stretch; ajuda a igualar a altura das colunas, proporcionando uma aparência mais uniforme.

No geral, este modelo é uma base muito útil para diversos tipos de layout na web, oferecendo uma estrutura sólida e fácil de personalizar com ajustes simples em CSS.