Al diseñar una página web que alinee los elementos en las posiciones adecuadas, es de gran importancia junto con hacerlos receptivos, lo que significa que alterarán su comportamiento dependiendo de los diferentes tipos de dispositivos que muestran la página web. Una forma de realizar ambas tareas antes mencionadas es construir un sistema de vista de cuadrícula. Aquí en este artículo, lo guiaremos paso a paso sobre cómo hacer una vista de cuadrícula receptiva desde cero.

Antes de saltar hacia su construcción, exploremos qué es realmente una vista de cuadrícula.

¿Qué es una vista de cuadrícula??

Una vista de cuadrícula es una técnica que divide una página web en varias columnas que facilita el posicionamiento de los elementos. Una vista de la cuadrícula, que responde por naturaleza, generalmente consta de 12 columnas junto con un ancho del 100% y escala hacia arriba y hacia abajo dependiendo del tamaño del navegador web.

Ahora veamos cómo construir una vista de cuadrícula receptiva desde cero.

Construyendo una vista de cuadrícula receptiva

A continuación hemos demostrado el procedimiento paso a paso de construir una vista de cuadrícula receptiva.

Requisito previo

Antes de saltar hacia la codificación, debe dibujar la vista de la cuadrícula en el papel para que sepa exactamente dónde colocar qué elemento. Por ejemplo, aquí está el boceto de la vista de la red que vamos a construir.

Ahora que tenemos nuestro boceto, comencemos la parte de codificación.

Paso 1

La necesidad básica de hacer que una página web responda es agregar una metaetiqueta receptiva en su archivo HTML.

Html

El atributo Width = Width de dispositivo significa que el ancho de la página web cambiará en correspondencia al ancho del dispositivo, mientras que, inicial a escala = 1.0 atributo significa cuando el navegador cargue la página web por primera vez, el nivel de zoom será 1.

Paso 2

Agregue algunos elementos HTML que desea mostrar en la página web.

Html

Pista de Linux

Para agregar contenido en nuestra sección de encabezado, estamos haciendo un contenedor Div y envolviendo nuestro encabezado dentro de este contenedor.

Html

• Sobre nosotros


• Autores


• Artículos publicados


• Categorías de artículos

Todo sobre lenguajes de programación!

Aquí encontrará artículos bien escritos y bien estructurados relacionados con todos los lenguajes de programación compuestos por nuestros autores refinados.

Con el fin de insertar contenido en la barra lateral, hemos hecho un DIV con nombres de clase "Barra lateral Col-3" y anidados una lista desordenada dentro de él. En lo que respecta a la sección principal, hemos agregado dos párrafos y los anidamos dentro de otro Div con nombres de clase "Col-9 Main". Ambos elementos Div están más anidados en un div más grande con el nombre de clase "Contenedor".

Las clases asignadas a los elementos DIV anidados se explicarán más adelante.

Paso 3

Ahora hemos terminado con nuestra parte HTML y ahora pasamos a nuestra parte CSS del código. Lo primero que debe hacerse en la hoja de estilo es establecer la propiedad de tamaño de caja de los elementos HTML en la caja de border.

CSS

*
dimensionamiento de la caja: border-box;

La razón detrás de esto es que esta propiedad incluye el relleno y el borde en la altura y el ancho total de los elementos HTML.

Paso 4

Ahora convierta nuestra página en una vista de cuadrícula receptiva de 12 columnas. Para hacer esto, tenemos que realizar ciertos cálculos para proporcionar ciertos anchos a cada columna y obtener control sobre la página web cuando se trata de organizar los elementos.

El ancho de una sola columna = 1/12 del ancho de pantalla total = 100%/12 = 8.33%.

El ancho de dos columnas combinadas = 2/12 del ancho de pantalla total = 2 (100%)/12 = 16.66%

El ancho de tres columnas combinadas = 3/12 del ancho de la pantalla total = 3 (100%)/12 = 25%

El ancho de cuatro columnas combinadas = 4/12 del ancho de la pantalla total = 4 (100%)/12 = 33.33%

Etcétera.

CSS

.col-1 ancho: 8.33%;
.Col-2 ancho: 16.66%;
.Col-3 ancho: 25%;
.Col-4 ancho: 33.33%;
.Col-5 ancho: 41.66%;
.Col-6 ancho: 50%;
.Col-7 ancho: 58.33%;
.Col-8 ancho: 66.66%;
.Col-9 ancho: 75%;
.Col-10 ancho: 83.33%;
.Col-11 ancho: 91.66%;
.Col-12 ancho: 100%;

El ancho de todas las columnas se ha definido en el CSS.

Nota:

Queríamos colocar nuestra barra lateral y la sección principal en dos columnas. Una vista de cuadrícula con dos columnas se parece a esto.

Cuando observamos los anchos de las diversas columnas en el código anterior, descubrimos que tres columnas tendrán un 25% de ancho, y nueve columnas tendrán un ancho del 75%. Por lo tanto, el div que los anidan la lista de menú se ha asignado el .Col-3 clase, mientras que el Div con el contenido de la sección principal se ha dado .Col-9 clase.

Paso 5

Ahora usando la clase ".col- ”, proporcionemos un poco de relleno a las columnas y las flote a la izquierda.

CSS

[class*= "col-"]
flotador izquierdo;
relleno: 10px;

El flotador: la propiedad izquierda coloca estas columnas a la izquierda del contenedor que las sostiene para que el texto y otros elementos en línea se envuelvan dentro de las columnas. Sin embargo, esto posicionará los elementos como si las columnas no estuvieran allí en absoluto. Por lo tanto, tenemos que despejar el flujo. Para hacerlo, siga el fragmento de código a continuación.

CSS

.contenedor :: después
contenido: "";
Limpia los dos;
Pantalla: tabla;

El: después de la clase y la propiedad de contenido se usa para agregar contenido después del contenedor. Mientras tanto, el valor de la tabla de la propiedad de visualización hará que el contenido aparezca en forma de una Tabla I.E en filas y columnas.

Paso 6

.encabezado
Color de fondo: Bisque;
color blanco;
relleno: 20px;

.Barra lateral ul
margen: auto;
relleno: 0px;

.barra lateral li
relleno: 10px;
margen-fondo: 10px;
Color de fondo: Rosybrown;
color blanco;

Por último, ahora estamos diseñando nuestros elementos utilizando las clases asignadas a los contenedores Div del encabezado y la barra lateral.

Producción

La página web se ha mostrado en anchos de pantalla aleatorios.

Esta es nuestra página web en 1250px.

Nuestra página web en el ancho de 600px.

Conclusión

Para crear una vista de cuadrícula receptiva, primero debe dibujar el diseño que desea que su página web tenga luego dividir su página en varias columnas. Por ejemplo, en el ejemplo utilizado en este artículo, dividimos nuestra página en 12 columnas calculando el porcentaje de cada columna. Posteriormente, puede usar ese porcentaje para colocar sus elementos con precisión en varias columnas. En esta guía, le hemos demostrado un procedimiento paso a paso para construir una vista de cuadrícula desde cero.