Diseño HTML de tres columnas
- Crear un diseño de tres columnas en HTML
- Cree un diseño receptivo de tres columnas en HTML
- Conclusión
Los sitios web suelen utilizar varias columnas para mostrar el contenido. El diseño de la columna se puede diseñar de muchas maneras según los requisitos del diseñador.
Podemos crear diseños de columnas receptivos y atractivos con una combinación de HTML y CSS. En este artículo, nos centraremos en diseñar un diseño de 3 columnas.
Crear un diseño de tres columnas en HTML
Generalmente, las columnas HTML se definen usando la etiqueta <div>. Entre la etiqueta <div>, definimos la clase con la palabra clave fila.
Al definir el diseño de tres columnas, debe crear tres elementos <div> y tres clases de columna entre ellos.
Veamos el siguiente ejemplo.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
Teniendo en cuenta el código HTML anterior, declaramos la clase fila dentro del primer elemento <div> dentro de ella. Tres columnas se definen como clases que pueden dividir toda el área del navegador.
Usando el elemento estilo, podemos agregar colores de fondo para las tres columnas.
El contenido de las columnas depende absolutamente de los pensamientos del diseñador. Con la ayuda del código anterior, podemos diseñar un diseño simple de 3 columnas.
Se recomienda encarecidamente agregar algunas propiedades CSS para obtener un diseño adecuado de 3 columnas. Podemos usar el código CSS a continuación para ese propósito.
Agregue propiedades CSS al diseño de columna HTML
Podemos crear un diseño de columna básico usando propiedades HTML, pero con la ayuda de las propiedades CSS, sería más interactivo. Ayudan a diseñar las columnas.
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
El diseño de 3 columnas se puede hacer como una cuadrícula. El código CSS anterior indica cómo usar la propiedad display para mostrar el diseño de la cuadrícula.
Tenemos la propiedad grid-template-columns para dividir toda el área del espacio del navegador en las mismas tres columnas.
La propiedad CSS altura define la altura de la columna. La propiedad justify-content se utiliza para justificar el contenido de cada columna.
Además, agregamos text-align y font-size.
Como resultado de los códigos HTML y CSS anteriores, podemos obtener un diseño de 3 columnas como el siguiente.
El diseño web debe encajar con distintos tipos de pantallas. Crearemos un diseño de 3 columnas HTML receptivo para ayudar con algunos elementos HTML.
Veamos cómo diseñar un diseño de columna receptivo.
Cree un diseño receptivo de tres columnas en HTML
Hay varias formas de hacer que el diseño de la columna responda. Podemos agregar un elemento de ventana gráfica para ajustar el diseño a diferentes pantallas.
<meta name="viewport" content="width=device-width, initial-scale=1">
La etiqueta <meta> se usa para agregar el elemento viewport que establecerá el viewport de la página web. La configuración de la ventana gráfica de la página web le indicará al navegador que administre el tamaño y la escala de la página.
Usando el código HTML anterior, podemos hacer que el diseño de la columna se adapte a todos los diferentes tipos de tamaños de pantalla. Deberíamos agregar el código anterior dentro del elemento head del código HTML como el siguiente código.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
</style>
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
Conclusión
El diseño HTML de 3 columnas se puede crear simplemente definiendo el elemento <div> con las clases fila y columna y agregando algunas propiedades de estilo CSS. Este artículo discutió la creación de un diseño básico de 3 columnas usando HTML y agregando algunas propiedades CSS para darles estilo.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.