Introducción al diseño de cuadrícula CSS (con ejemplos)

CSS Grid se ha apoderado del mundo del diseño web. Es bastante genial. Hay muchos tutoriales, blogs y artículos en Internet, que son excelentes fuentes de conocimiento.

Pero la mayoría de ellos te enseñan lo básico con muy pocos ejemplos reales. Entonces, en esta guía, veremos ejemplos a medida que aprendamos.

¿Qué es Grid?

CSS Grid nos permite escribir mejores diseños utilizando la capacidad de las cuadrículas en el navegador. Antes de CSS Grid, teníamos que usar nuestro propio sistema de cuadrícula personalizado o algo como Bootstrap.

Estas otras opciones funcionan bien, pero la cuadrícula CSS elimina el dolor de la mayoría de las cosas que enfrentamos en esas soluciones.

CSS Grid hace que sea muy fácil desarrollar diseños simples y complejos. En este blog aprenderemos algunas terminologías básicas y luego seguiremos con un ejemplo de diseño simple.

Terminologías básicas

Los términos básicos asociados con CSS Grid son los siguientes:

  1. Columnas
  2. Filas
  3. Células
  4. Líneas de cuadrícula
  5. Canal

Todos los términos se explican en el diagrama anterior. Este ejemplo es una cuadrícula de columnas de 3x2, lo que significa 3 columnas y 2 filas.

Diseño de ejemplo

Ahora que los conceptos básicos están fuera del camino, usaremos estos conceptos para hacer un diseño de ejemplo como el siguiente:

Como puede ver, hay un encabezado y un pie de página. Luego, la fila central tiene 3 columnas con navegación en la barra lateral de la primera columna a la derecha y el área de contenido principal en el centro (que ocupa la mayor parte de la fila).

A continuación se muestra el HTML de muestra para este ejemplo.

 HEADER NAV CONTENTS ASIDE FOOTER 

Ahora que el HTML está fuera de nuestro camino, profundicemos en el CSS. En primer lugar, vamos a darle un poco de estilo para que nuestro HTML se vea como el anterior. Estas reglas CSS no forman parte de la cuadrícula CSS, por lo que puede omitirlas si lo desea.

.wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; }

Como puede ver, estoy diseñando todos los elementos dentro de un contenedor. Estoy configurando su color de fondo en orangey dando bottomy rightmargins.estoy configurando displayflexsolo para alinear elementos en el centro de la configuración justify-contenty align-itemspara center.

A continuación, entremos en la parte de CSS Grid.

.wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; }

En la pieza de código anterior estamos fijando displaya grid- de ahí el título de este tema. Así es como convertimos un contenedor en grid.

A continuación, configuramos las columnas y filas. Haremos esto usando las propiedades grid-template-columnsy grid-template-rows. grid-template-columnsnos permite configurar el número de columnas con sus correspondientes width. grid-template-rowsnos permite establecer el número de rowscon su correspondiente height.

En el ejemplo anterior, hay 3 columnas con la primera columna tomando 1 fraction, la segunda columna tomando 5 fractiony la tercera columna 2 fractions. Una sola unidad de fracción significa "una pieza de la cantidad de piezas en las que estamos dividiendo esto" .

Si observa el mismo ejemplo anterior, se aplica el mismo concepto rows. Hay tres filas, y la primera fila contiene el headerque ocupa toda la fila en las tres columnas. La segunda fila toma la navegación, el contenido y un lado, mientras que el pie de página va a la tercera y última fila y ocupa las tres columnas.

Esto significa que la primera y la última fila ocupan la misma altura, es decir 5 fractions. Y la fila central ocupa el resto de la altura restante.

A continuación, también crearemos un canalón de 10px. Podemos hacer esto en CSS Grid usando la grid-gappropiedad. Por último, establecemos una altura para nuestro contenedor de envoltura.

Si lo miramos en el navegador obtendremos el resultado que buscamos:

Ahora hagamos que se vea más como queremos que se vea estableciendo algunas propiedades para el encabezado y pie de página. Vamos a decirle al encabezado y al pie de página que ocupen sus filas completas.

Haremos esto usando las propiedades grid-column-starty grid-column-end, así:

header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; }

Como puede ver, tanto el encabezado como el pie de página comienzan en grid line1 y terminan en grid line4. Esto les permite ocupar sus filas completas. Esto producirá el resultado exacto que estamos buscando, como se muestra a continuación:

Código completo

   CSS Grid  .wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; } header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; } .wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; } HEADER NAV CONTENTS ASIDE FOOTER 

Eso es todo por este artículo. Puedes seguirme aquí para más artículos. Si te gustó, no olvides compartirlo en las redes sociales.