Los diseños de cuadrícula son fundamentales para el diseño de sitios web, y el módulo CSS Grid es la herramienta más poderosa y fácil para crearlo. Personalmente, creo que es mucho mejor que, por ejemplo, Bootstrap (lea por qué aquí).
El módulo también ha recibido soporte nativo de los principales navegadores (Safari, Chrome, Firefox, Edge), por lo que creo que todos los desarrolladores de aplicaciones para el usuario tendrán que aprender esta tecnología en un futuro no muy lejano .
En este artículo, lo llevaré a través de los conceptos básicos de CSS Grid lo más rápido posible. Dejaré de lado todo lo que no debería importarle hasta que haya entendido los conceptos básicos.
También he creado un curso gratuito de CSS Grid. Haga clic aquí para obtener acceso completo a
eso.
Alternativamente, consulte este artículo, que explica lo que aprenderá a lo largo del curso:
¡Ahora saltemos a eso!
Tu primer diseño de cuadrícula
Los dos ingredientes principales de una cuadrícula CSS son el contenedor (padre) y el
artículos (niños). El contenedor es la cuadrícula real y los elementos son el contenido dentro de la cuadrícula.
Aquí está el marcado para un contenedor con seis elementos:
1 2 3 4 5 6 Para convertir nuestra envoltura diven una cuadrícula , simplemente le damos una pantalla de
grid:
Pero esto no hace nada todavía, ya que no hemos definido cómo queremos que se vea nuestra cuadrícula. Simplemente apilará 6 div'suno encima del otro.
Agregué un poco de estilo, pero eso no tiene nada que ver con la cuadrícula CSS.
Columnas y filas
Para hacerlo bidimensional, necesitaremos definir las columnas y filas. Creemos tres columnas y dos filas. Usaremos las propiedades grid-template-rowy grid-template-column.
Como hemos escrito tres valores para grid-template-columns, obtendremos tres columnas. Obtendremos dos filas, ya que hemos especificado dos valores para grid-template-rows.
Los valores dictan qué tan anchas queremos que sean nuestras columnas (100px) y qué tan altas queremos que sean nuestras filas (50px). Aquí está el resultado:
Para asegurarse de que comprende correctamente la relación entre los valores y el aspecto de la cuadrícula, eche un vistazo también a este ejemplo.
.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } Intente captar la conexión entre el código y el diseño.
Así es como se desarrolla:
Colocando los artículos
Lo siguiente que deberá aprender es cómo colocar elementos en la cuadrícula. Aquí es donde obtienes superpoderes, ya que hace que sea muy simple crear diseños.
Creemos una cuadrícula de 3x3, usando el mismo marcado que antes.
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } Esto dará como resultado el siguiente diseño:
Observe que solo vemos una cuadrícula de 3x2 en la página, mientras que la definimos como una cuadrícula de 3x3. Eso es porque solo tenemos seis elementos para llenar la cuadrícula. Si tuviéramos tres más, también se llenaría la fila más baja.
Para colocar y cambiar el tamaño de los elementos, los orientaremos y usaremos las propiedades grid-columny grid-row:
.item1 { grid-column-start: 1; grid-column-end: 4; } Lo que estamos diciendo aquí es que queremos que item1 comience en la primera línea de la cuadrícula y termine en la cuarta línea de la columna. En otras palabras, ocupará toda la fila.
Así es como se verá eso en la pantalla:
¿Estás confundido por qué tenemos 4 líneas de columna cuando solo tenemos 3 columnas? Eche un vistazo a esta imagen, donde dibujé las líneas de las columnas en negro:
Observe que ahora estamos usando todas las filas de la cuadrícula. Cuando hicimos que el primer elemento ocupara toda la primera fila, empujó el resto de los elementos hacia abajo.
Finalmente, me gustaría mostrar una forma más sencilla de escribir la sintaxis anterior:
Para asegurarse de que ha entendido este concepto correctamente, reorganicemos un poco los elementos.
.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } Así es como se ve en la página. Trate de entender por qué se ve así. No debería ser demasiado difícil.
¡Y eso fue todo!
¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.
