Plantilla CSS: Diseño de dos columnas (25% / 75%)
📝 Uso previsto
Esta plantilla se utiliza para crear un diseño con dos columnas divididas: 25% a la izquierda y 75% a la derecha. Ideal para estructuras como navegación + contenido o menú + contenido.
📘 Explicación
Usando display: flex; se colocan los elementos uno al lado del otro. flex: 0 0 25% define el ancho de la columna izquierda y flex: 1 permite que la columna derecha ocupe el resto del espacio.
✅ Demostración
📄 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">Columna izquierda (25%)</div>
<div class="right-column">Columna derecha (75%)</div>
</div>
📦 Código (HTML completo)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demostración de dos columnas</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">Columna izquierda (25%)</div>
<div class="right-column">Columna derecha (75%)</div>
</div>
</body>
</html>
🧩 Puntos clave para aplicar y personalizar
Este diseño de dos columnas es ideal para mostrar información dividida en secciones izquierda y derecha. En particular, la propiedad flex: 0 0 25% permite fijar el ancho de la columna izquierda, mientras que la derecha se expande de forma flexible. Es perfecto para estructuras como barra lateral + contenido principal.
Si deseas adaptar este diseño a dispositivos móviles, se recomienda usar media queries. Por ejemplo, con @media (max-width: 768px) puedes aplicar flex-direction: column; para que las columnas se apilen verticalmente, mejorando la visualización en pantallas pequeñas.
En cuanto al estilo, gap ayuda a mantener un espaciado natural entre las columnas, siendo más fácil de gestionar que usar margin manualmente. También, al aplicar border-left en la columna derecha, se obtiene un efecto visual que refuerza la separación entre ambas áreas.
🔧 Consideraciones al implementar
Dependiendo de la cantidad de contenido, una de las columnas puede volverse más alta que la otra. En esos casos, puedes usar align-items: stretch; para igualar las alturas y mantener una apariencia más uniforme.
En resumen, esta plantilla no solo ofrece una estructura básica sólida, sino que también permite múltiples personalizaciones mediante técnicas CSS, siendo muy útil como base para distintos tipos de diseño web.