Css display grid

Conocer las propiedades del lenguaje CSS es esencial para involucrarse adecuadamente en el aprendizaje del desarrollo web. Como bien sabemos a estas alturas, el lenguaje CSS es un lenguaje fundamental para definir el front-end dentro de una página web.

Pero, ¿qué es?

Es un lenguaje para diseñar un documento HTML; de hecho, los archivos CSS se denominan comúnmente "hojas de estilo". No en vano, CSS significa Cascading Style Sheets y es esencial para formatear documentos en una página web. Si quieres aprender a programar, seguro que el lenguaje CSS es un lenguaje que tiene una curva de aprendizaje sencilla y gradual y, por tanto, un curso de CSS puede ser una excelente idea, sobre todo si aspiras a convertirte en desarrollador web.

Gracias a la ayuda de sus reglas será posible, de hecho, definir los colores, el tamaño de los elementos, las fuentes y la posición de los objetos en la página.

Esta última característica es fundamental para organizar una página web ordenada, comprensible para el usuario y con un alto grado de interacción. El lenguaje CSS hace que Grid esté disponible, un diseño bidimensional que se puede usar para crear elementos receptivos en las páginas web. Los elementos de la cuadrícula se organizan en columnas y se pueden colocar fácilmente sin tener que modificar el código HTML. A diferencia de otras propiedades, podemos tener mosaicos que no dependen de la longitud o la altura de los demás.

Para que funcione, la cuadrícula debe insertarse dentro de otro elemento "principal", que contiene las distintas columnas de la cuadrícula. Una característica de la grid CSS es la gran cantidad de propiedades que tiene. Una de las más importantes es la display: grid.

Esta es una propiedad de cuadrícula CSS que aloja los elementos de la cuadrícula. Se debe implementar la propiedad en el contenedor de cuadrícula CSS configurando el contenedor en una propiedad de visualización, escribiendo:

display: grid;

Por definición, esta propiedad establece el elemento como contenedor de la cuadrícula y establece un nuevo contexto de formato de cuadrícula para su contenido. Acepta dos tipos diferentes de valores CSS, la grid antes mencionada que genera una cuadrícula a nivel de bloque (que contiene elementos HTML) o la inline-grid que genera una cuadrícula alineada.

Sin la propiedad display: grid, la cuadrícula no se mostrará. Es esencial recordar insertar esta propiedad dentro de cada grid-container o cualquiera que sea el elemento principal que contiene la cuadrícula.

En términos más generales, la propiedad display establece los tipos de visualización internos y externos de un elemento. El tipo interno administra el diseño de los elementos "secundarios". Cuando asociamos grid a display, el comportamiento del bloque que se mostrará depende de las reglas y el contenido establecido en el grid model. Es crucial no olvidar esta propiedad ya que define cómo se posicionarán los componentes dentro de la página web. Al final de todo, la display grid no administra la posición interna de los bloques, su tamaño o diseño, pero admite la configuración y las otras (innumerables) propiedades que utiliza la grid para posicionar las filas o columnas. Veamos algunos ejemplos en lenguaje CSS:

Para definir una cuadrícula muy básica en CSS, debe usar la propiedad display:grid en el elemento principal. Después de eso, se establecen todas las propiedades para administrar las filas y columnas de la cuadrícula.

  body {
   margin: 40px;
 }

 .wrapper {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-gap: 10px;
   background-color: #fff;
   color: #444;
 }

 .box {
   background-color: #444;
   color: #fff;
   border-radius: 5px;
   padding: 20px;
   font-size: 150%;
 }

Como se puede ver, la propiedad display es la primera en declararse. Este último heredará las otras propiedades de la grid CSS para permitir la visualización de la cuadrícula en la página web.

Cualquier tipo de cuadrícula que se desee crear requiere la propiedad de visualización. Olvidarlo u omitirlo es un error muy grave que puede comprometer la estructura de la página web.

La alternativa más utilizada al Grid en CSS es Flexbox CSS.
¿No sabes lo que es? ¡No te preocupes! Para averiguarlo, puedes ir y consultar nuestra guía online de html y css.

Aprender a programar es un proceso largo que requiere dedicación, pero que se convierte en una gran satisfacción si es tu ambición. Para obtener más información sobre las cuadrículas, la propiedad display y el lenguaje CSS en general, ¡no te pierdas nuestra guía antes mencionada y el Hackademy, nuestro curso para desarrolladores web!