Usted sabe que CSS Grid es el sistema de diseño más poderoso en CSS, pero es difícil comenzar con él. O tal vez lo hayas intentado y fracasado.
¿No sería fantástico si pudieras aprender todo lo que necesitas para usar CSS Grid con éxito en un solo lugar, desde conceptos principiantes hasta conceptos avanzados?
Con esta guía integral aprenderá todas las habilidades que necesita para tener éxito con CSS Grid.
¿Estas listo para empezar? Vamos a empezar.
Voy a utilizar un enfoque realmente simplificado, para que puedas entender las cuadrículas CSS de la forma más sencilla posible.
Relación padre-hijo en CSS Grids
Es posible que haya oído hablar de la relación entre padres e hijos en los elementos html.
A continuación se muestra un ejemplo:
Como puede ver, un padre tiene tres hijos.
El primer hijo es un desarrollador front-end, el segundo es un desarrollador back-end y el tercero es un desarrollador full-stack.
Avance rápido, agregué algunos estilos básicos para padres e hijos, como colores, relleno, etc.
A continuación se muestra el resultado:
- Padre en fondo negro
- Niños en diferentes colores de fondo.
En las cuadrículas CSS, tenemos diferentes propiedades para padres e hijos.
Propiedades principales de la cuadrícula CSS:
A continuación se muestra la lista de propiedades principales de CSS Grid que aprenderá:
- visualización (cuadrícula | cuadrícula en línea)
- columnas-plantilla-cuadrícula
- filas de plantilla de cuadrícula
- alinear elementos
- justificar-contenido
- justificar elementos
- espacio entre filas
- espacio entre columnas
- columnas-automáticas de cuadrícula
- filas-automáticas de cuadrícula
- flujo automático de cuadrícula
- áreas de plantilla de cuadrícula
- plantilla de cuadrícula
visualización (cuadrícula | cuadrícula en línea):
En CSS, ya estás familiarizado con la propiedad de visualización, ¿verdad?
Ahora puedes usar display: grid; (nivel de bloque) o visualización: cuadrícula en línea; (Nivel en línea)
Si no conoce el bloque CSS y el nivel en línea.
Nivel de bloque: Que endereza el elemento para ocupar el espacio completo.
nivel en línea: No ocupa ningún espacio adicional que no sea el elemento o el contenido interior.
La mayor parte del tiempo utilizarás display: grid ;
Entonces, ¿qué hace?
Otorga superpoderes a todos los hijos directos de los padres, sin él no se pueden usar las propiedades de la cuadrícula CSS.
Por lo tanto, es la primera e importante propiedad que colocará para iniciar CSS Grids.
Después de agregar display: grid; No notarás nada porque todos los elementos o hijos dentro del padre son div, que ya es un elemento a nivel de bloque, pero detrás de escena, les has dado muchos poderes a los hijos.
columnas-plantilla-cuadrícula
Crear columnas ahora es más fácil que nunca.
Digamos que queremos crear dos columnas, la primera debe ser del 20% y la segunda debe ser del 80%.
Entonces, verá que creamos dos columnas con éxito.
El tercer niño pasó automáticamente a la primera columna y a la segunda fila.
Solo tenga en cuenta: estas columnas aún no responden, pero no se preocupe, veremos la parte receptiva más adelante.
Puedes hacer cualquier número de columnas.
Unidad Fr (Fracción)
¿Qué pasa si quieres tres columnas iguales?
Para eso, puedes usar el porcentaje también como (33,33% 33,33% 33,33%).
Pero deberías utilizar la unidad fr(fracción) .
La unidad Fr ajusta automáticamente los píxeles para ocupar todo el espacio restante.
1fr significa espacio simple, 2 significa espacio doble, y así sucesivamente.
Si pones 2fr para la segunda columna, consumirá mucho más espacio que las otras dos.
Y sí, puedes combinarlo con cualquier otra unidad como 20% 1fr 160px.
No solo eso, también puedes usar esta unidad para filas. Lo analizaremos más adelante.
Entonces, las posibilidades son infinitas.
filas de plantilla de cuadrícula
En nuestro ejemplo, digamos que lo divide en 2 columnas con 1fr 1fr, el tercer hijo irá automáticamente a la segunda fila.
Verás, que se ha ajustado automáticamente.
Si desea que la primera fila permanezca igual y la segunda fila con una altura de fila de 200 px, deberá utilizar grid-template-rows con valores como 1fr 200 px .
Espacios o canales en CSS Grid
Ahora ya sabes acerca de filas y columnas y quieres un espacio o espaciado.
Digamos que quieres poner 10px de espacio para las columnas y 30px para las filas.
Puede utilizar la propiedad column-gap para columnas y row-gap para filas.
Hay una propiedad abreviada llamada espacio que contiene el espacio entre filas y columnas juntos.
función minmax()
En palabras simples, le está indicando a la cuadrícula CSS que agregue el valor límite como el ancho mínimo y el ancho máximo de la columna especificada.
Acepta dos parámetros (el ancho mínimo de columna, el ancho máximo de columna)
Nota: También puede utilizar minmax() con grid-template-rows, grid-auto-columns y grid-auto-rows.
Ahora, puedes ver que la primera columna usa minmax().
Si minimiza su pantalla, verá que la primera columna se mantendrá en 100px.
función repetir()
¿Qué pasa si quieres 20 columnas con 100 px? Entonces, en lugar de escribir 100px 20 veces en columnas de plantilla de cuadrícula, puede usar la función repetir().
Acepta dos parámetros (Cuántas columnas desea, ancho de las columnas)
Ejemplo:
columnas-plantilla-cuadrícula : repetir(20, 100px)
Nota: También puedes usar repetir() con filas de plantilla de cuadrícula.
En nuestro caso, tenemos dos columnas repetidas.
Antes:
Después:
contenido mínimo vs contenido máximo
En el caso de contenido mínimo, el cuadro ocupa el espacio según el contenido más grande en ese cuadro.
Mientras que max-content ocupa el espacio para todo el contenido.
Mire en 3 columnas ( min-content, 1fr y max-content ).
Puede ver que la primera columna de los niños ocupó tanto espacio como la palabra front-end.
Y en el lado derecho, la tercera columna ocupa espacio según todo el contenido dentro del cuadro. Entonces, el ancho de la tercera columna se refiere al desarrollador de pila completa.
autocompletar vs autoajuste
¿Qué sucede si desea columnas flexibles sin definir los números de columna explícitos?
Por ejemplo, ¿qué pasa si no está seguro de cuántas columnas necesita y desea flexibilidad o ajustes automáticos de las columnas según los hijos?
En la función repetir(), puede definir dos valores potentes (autocompletar o ajuste automático) en lugar del número de columna.
El autocompletar hizo su cálculo automáticamente y devolvió 4 columnas sin que nos preocupemos por el número de columna.
Existe una ligera diferencia entre el autocompletar y el autoajuste, que abordaré más adelante. Por ahora, seamos simples y consideremos ambos iguales.
filas-automáticas de cuadrícula:
¿Qué pasa si ha definido filas de plantilla de cuadrícula para dos filas? ¿Qué pasará con los niños después de dos filas?
Para cubrir este desafío, podemos utilizar grid-auto-rows.
Puede definir fácilmente la altura de fila deseada automáticamente para todas las filas restantes a la vez.
alinear elementos:
Se utiliza para alinear a los niños en la dirección vertical de la celda de la cuadrícula. Acepta los siguientes valores:
alinear elementos:
- base
- centro
- fin | extremo flexible | fin propio
- inicio | inicio flexible | autocomienzo
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
justificar elementos:
Se utiliza para alinear a los niños en la dirección horizontal de la celda de la cuadrícula. Acepta los siguientes valores:
justificar elementos:
- base
- centro
- fin | extremo flexible | autofin | bien
- inicio | inicio flexible | inicio automático | izquierda
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
alinear contenido:
Se utiliza para alinear el contenedor de la cuadrícula en la dirección vertical de la cuadrícula. Acepta los siguientes valores:
alinear contenido:
- base
- centro
- fin | extremo flexible | autofin | bien
- inicio | inicio flexible | inicio automático | izquierda
- espacio alrededor
- espacio entre
- uniformemente en el espacio
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
justificar-contenido:
Se utiliza para alinear el contenedor de la cuadrícula en la dirección horizontal de la cuadrícula. Acepta los siguientes valores:
justificar-contenido:
- base
- centro
- fin | extremo flexible | autofin | bien
- inicio | inicio flexible | inicio automático | izquierda
- espacio alrededor
- espacio entre
- uniformemente en el espacio
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
Antes:
Después:
Propiedades de los hijos de la cuadrícula CSS:
A continuación se muestra la lista de propiedades secundarias de CSS Grid que aprenderá:
- columna-cuadrícula (inicio-columna-cuadrícula y final-columna-cuadrícula)
- fila-cuadrícula (inicio-fila-cuadrícula y final-fila-cuadrícula)
- área de cuadrícula
- justificarse
- alinearse
- orden
fila de cuadrícula:
¿Qué sucede si desea mover explícitamente el elemento de una fila a otra?
Si el niño está en la 1ª fila y quieres pasar a la segunda.
Puedes hacerlo fácilmente con grid-row .
Es una forma abreviada de grid-row-start y grid-row-end.
inicio de fila de cuadrícula:
Aquí pones el número de línea de la fila desde donde estás empezando.
extremo de fila de cuadrícula:
Aquí pones el número de línea de la fila hasta donde quieres terminar.
A continuación se muestra una imagen para los números de línea de fila:
Movamos el desarrollador front-end (primer hijo y primera fila) al lugar del diseñador gráfico (cuarto hijo y segunda fila).
La segunda fila comienza con la línea número 2 y termina en la línea número 3:
Forma corta:
columna de cuadrícula
¿Qué sucede si desea mover explícitamente el elemento de una columna a otra?
Si el niño está en la primera columna y quieres pasar a la segunda.
Puedes hacerlo fácilmente con grid-column .
Es una forma abreviada de grid-column-start y grid-column-end.
grid-column-start: Aquí pones el número de línea de la columna desde donde estás empezando.
grid-column-end: Aquí pones el número de línea de la columna hasta donde quieres terminar.
A continuación se muestra una imagen para los números de línea de columna:
Ahora muevamos el desarrollador front-end (primer hijo y primera columna) al lugar del desarrollador Full-stack (tercer hijo y tercera columna).
Nota: Los otros dos niños pasaron automáticamente a la segunda fila. La razón es que no definimos la fila de la cuadrícula para este niño.
Agregar grid-row explícitamente solucionará este problema.
Ampliación de filas y columnas CSS:
Ahora que ha aprendido sobre la columna de cuadrícula y la fila de cuadrícula.
A continuación se muestra un ejemplo de cómo expandir las columnas.
Columna de caso: expanda el primer hijo para consumir también el espacio de la segunda columna.
columna de cuadrícula: 1/3; (Forma corta de inicio y fin)
Fila de caso: ahora, expanda el primer hijo para consumir también el espacio de la segunda fila.
fila de cuadrícula: 1/3;
Ahora también existe una forma más sencilla. Puede utilizar el valor dentro de la columna o fila de la cuadrícula que se extiende.
Es decir, cuánto consumo quieres en una columna o cuadrícula.
Como span 2 significa consumir dos columnas o filas.
Y sí, puedes combinarlo con el concepto de inicio y fin.
Por ejemplo, comience con 3 y luego consuma 2 columnas o filas más.
alinearse
Se utiliza para alinear niños individuales en la dirección vertical de la celda de la cuadrícula. Acepta los siguientes valores:
alinearse a sí mismo:
- base
- centro
- fin | extremo flexible | fin propio
- inicio | inicio flexible | autocomienzo
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
Consejo: funciona igual que align-items (propiedad de contenedor de cuadrícula). La diferencia es que align-self se puede utilizar para alinear a los niños individualmente.
Ejemplo: Es posible que desee tener los primeros hijos en el medio de la celda de la cuadrícula o los terceros hijos al final de la celda de la cuadrícula.
justificarse
Se utiliza para alinear niños individuales en la dirección horizontal de la celda de la cuadrícula. Acepta los siguientes valores:
justificarse a sí mismo:
- base
- centro
- fin | extremo flexible | autofin | bien
- inicio | inicio flexible | inicio automático | izquierda
- estirar (predeterminado: cuando define la cuadrícula, se configura automáticamente para todos los niños)
Consejo: funciona igual que justificar elementos (propiedad de contenedor de cuadrícula). La diferencia es que la autojustificación se puede utilizar para alinear a los niños individualmente.
Ejemplo: Es posible que desee que los primeros hijos estén en el centro de la celda de la cuadrícula o los terceros hijos al final de la celda de la cuadrícula.
áreas de plantilla de cuadrícula
Es una propiedad principal de cuadrícula CSS opcional y potente. Lo coloco aquí para que puedas captar el concepto fácilmente.
Puede usarlo después de definir columnas o filas de plantilla de cuadrícula en el elemento principal.
Puede nombrar fácilmente el sistema de cuadrícula deseado, como dónde colocar el primer niño y dónde colocar el segundo, etc.
Digamos que tenemos el siguiente diseño.
Ahora quiero colocar los elementos de la cuadrícula como:
- front-end (primeras 2 columnas y en la primera fila)
- back-end (tercera columna y en la primera fila)
- diseñador gráfico (primera columna y segunda fila)
- comercializador digital (primera columna y segunda fila)
- redactor de contenido (primera columna y segunda fila)
- pila completa (todas las columnas y la última fila)
Normalmente, puedes hacer esto con las propiedades grid-column y grid-row, ¿verdad?
Pero, en lugar de usarlos, puedes simplemente usar el área de cuadrícula para nombrar a cada niño.
Antes:
Después:
En padre:
En Niños o artículos:
La mejor parte es que ahora puedes simplemente cambiar el diseño completo con áreas de plantilla de cuadrícula.
Digamos que quieres:
- pila completa (primeras 2 columnas y en la segunda fila)
- Gráfico y Digital (tercera fila pero primeras dos columnas)
Nota:
Siempre debes cumplir con la ubicación de la cuadrícula. De lo contrario, se romperá el diseño.
Como a continuación, pueden ver para completar la tercera columna en la última fila puse el punto (que se considerará una columna vacía)
Ya he explicado lo que es necesario para esta propiedad, pero siempre puedes visitar MDN Web Docs y aprender grid-template-areas si necesitas más conocimientos.
Estructura de cuadrícula y terminologías:
La cuadrícula se compone de líneas de cuadrícula, pistas de cuadrícula, celdas de cuadrícula, área de cuadrícula, espacios de cuadrícula, elementos de cuadrícula y contenedor de cuadrícula.
Cuadricula
Las líneas verticales y horizontales que dividen la cuadrícula y separan las columnas y filas se llaman líneas de cuadrícula.
Hay números asignados a cada fila y columna.
Del ejemplo anterior: columnas de línea de cuadrícula (1,2,3,4) y filas de línea de cuadrícula (1, 2, 3).
Contenedor de rejilla
El contenedor, donde le darás superpoderes. Puede llamarlo el contenedor principal de cuadrícula CSS donde puede definir cuántas columnas, filas y espacios desea.
Elemento de cuadrícula o hijo
Son los hijos directos dentro del contenedor de cuadrícula CSS. Digamos que el padre tiene 3 hijos o un contenedor de cuadrícula tiene 3 elementos.
Cuadrícula de celdas
Puedes considerarlo un bloque donde puedes colocar los elementos de la grilla de forma explícita (Manualmente) o implícitamente (Por la fuerza).
Área de cuadrícula
El área entre dos líneas de cuadrícula verticales y dos horizontales se llama área de cuadrícula.
pistas gid
El espacio entre dos líneas de la cuadrícula se llama pista, sin importar si es vertical (columna) u horizontal (fila).
Ejemplo:
Pista de columna de cuadrícula (1 -> 2, 2 -> 3, 3 -> 4)
Seguimiento de filas de cuadrícula (1 -> 2, 2 -> 3, 3 -> 4)
Espacios en la cuadrícula CSS
El espacio entre las filas y columnas se llama espacios o medianil.
Preguntas más frecuentes
Aquí responderé las preguntas más frecuentes en las comunidades CSS.
P. ¿Es útil CSS Grid?
Sí, es súper útil. La mayoría de las empresas construyen sus marcos o sistemas de diseño sobre CSS Grids.
P. ¿Es importante CSS Grid?
Si afirma que sabe escribir CSS y no sabe acerca de las cuadrículas CSS, entonces debe comenzar a aprenderlo. Es importante al igual que CSS flexbox.
P. ¿Se admite la cuadrícula CSS?
Sí, en el desarrollo web moderno, las cuadrículas CSS son compatibles globalmente con casi todos los navegadores más recientes. Puede ver la adopción global en los navegadores desde el sitio web de caniuse .
P. ¿Cómo funciona la cuadrícula CSS?
Funciona en ambas direcciones, horizontal y vertical. En comparación, CSS flexbox funciona sólo en una dirección, ya sea horizontal o vertical.
P. ¿Cuándo utilizar CSS Grid?
Cuando piensas que CSS Grid puede resolver el problema de diseño mucho más rápido y mejor que flexbox.
P. ¿Cuándo se introdujo CSS Grid?
Según Wikipedia, CSS Grid se publicó por primera vez el 7 de abril de 2007.
P. ¿CSS Grid responde?
Por defecto, no lo es. Pero es muy fácil crear diseños responsivos con Grids.
P. ¿Se puede anidar CSS Grid?
De momento no, los desarrolladores están esperando que esta función esté disponible en todos los navegadores. En este momento, el Firefox moderno tiene esta característica que solo es específica del navegador y el concepto se llama subcuadrículas.
Muy importante:
Guía en proceso : Estoy escribiendo y publicando esta guía diariamente.
Si desea recibir actualizaciones, asegúrese de suscribirse a nuestro boletín y permitir notificaciones.
Una cosa más, también estoy trabajando en libros electrónicos, hojas de trucos y cursos de cuadrículas CSS.
Manténganse al tanto.
Nuestras guías de codificación:
1 comment
canadian pharmacy online
Wonderful web site. Plenty of helpful info here. I am sending it to several friends ans additionally sharing in delicious. And certainly, thanks in your effort!
Wonderful web site. Plenty of helpful info here. I am sending it to several friends ans additionally sharing in delicious. And certainly, thanks in your effort!