Share
A lo largo de esta serie, nos hemos familiarizado con la sintaxis de Grid, aprendimos algunas formas eficientes de diseñar elementos en una página y nos despedimos de algunos viejos hábitos. En este tutorial vamos a aplicar todo eso a un diseño web sensible y práctico..
Usemos la demo desde donde la dejamos la última vez..
Comprende dos grillas declaradas; nuestra cuadrícula principal y la cuadrícula anidada dentro de uno de nuestros elementos. Podemos controlar cuándo estas cuadrículas entran en efecto mediante consultas de medios, lo que significa que podemos redefinir completamente nuestro diseño en diferentes anchos de ventana gráfica.
Comience duplicando la primera declaración de cuadrícula y envolviendo el duplicado en una primera consulta de medios (estoy usando 500px como punto de interrupción, pero eso es completamente arbitrario):
.cuadrícula-1 / * estilos de declaración de cuadrícula * / pantalla solo @media y (mínimo ancho: 500 px) .grid-1 / * estilos de declaración de cuadrícula * /
Ahora, dentro de la primera declaración, cambiaremos cómo se define nuestra cuadrícula, colocando todo en una sola columna. Listaremos solo una columna en nuestro rejilla-plantilla-columnas regla, asegúrese de que las cuatro filas que tenemos ahora están definidas con cuadrícula-plantilla-filas, y organizar el diseño con cuadrícula-plantillas-áreas:
.grid-1 display: grid; ancho: 100%; margen: 0 auto; rejilla-plantilla-columnas: 1fr; rejilla-plantilla-filas: 80px auto auto 80px; rejilla: 10px; grid-template-areas: "header" "main" "sidebar" "footer";
También hemos hecho nuestro rejilla solo 10px por defecto, para tener en cuenta pantallas más pequeñas.
Esto es lo que nos da. Notarás que también estamos usando nuestra consulta de medios para cambiar el relleno y tamaño de fuente en nuestro .grid-1 div artículos.
Eso se ocupa del diseño principal, pero todavía tenemos la cuadrícula anidada que permanece obstinadamente en su diseño de dos columnas en todas las circunstancias. Para solucionarlo, haremos exactamente lo mismo que antes, pero usando un punto de interrupción diferente para sugerir un enfoque de contenido primero:
.ítem-2 / * estilos de declaración de cuadrícula * / pantalla solo @media y (mínimo ancho: 600 px) .item-2 / * estilos de declaración de cuadrícula * /
Echa un vistazo al resultado final en CodePen.
Un par de cosas a tener en cuenta aquí:
Otro enfoque (en cierto modo) sensible a Grid es muy adecuado para diseños tipo mampostería; Bloques que tamaño y flujo automáticamente, dependiendo de la ventana gráfica.
Nuestro enfoque hasta ahora ha sido dictar cuántas pistas hay y ver cómo encajan los elementos en consecuencia. Eso es lo que está pasando en esta demo; tenemos cuadrícula-plantilla-columnas: repetir (4, 1fr); que dice "crea cuatro columnas y haz de cada una una única fracción de ancho".
Con el autocompletar palabra clave podemos dictar cómo amplio nuestras pistas son y dejamos que Grid determine cuántos cabrán en el espacio disponible. En esta demo hemos utilizado. cuadrícula-plantilla-columnas: repetir (autocompletar, 9em); que dice "haz las columnas 9em de ancho cada una, y encaja tantas como puedas en el contenedor de la cuadrícula".
Nota: esto también toma nuestras cunetas, la rejilla, en cuenta.
El contenedor en estas demostraciones tiene un fondo oscuro para mostrar claramente la cantidad de espacio disponible, y verás que no se ha llenado completamente en el último ejemplo. Entonces cómo hacemos eso?
los mínimo máximo() La función nos permite establecer un tamaño mínimo y máximo para una pista, permitiendo que Grid funcione dentro de ellas. Por ejemplo, podríamos configurar tres columnas, las dos primeras con un ancho de 1fr, la última con un máximo de 1fr, pero no más pequeñas que 160px:
cuadrícula-plantillas-columnas: 1fr 1fr minmax (160px, 1fr);
Todas las columnas se reducirán cuando aplastes la ventana, pero la última columna solo será empujada hasta el momento. Echar un vistazo.
De vuelta a nuestro autocompletar Demo, si tuviéramos que cambiar el ancho de nuestra columna por minmax (9em, 1fr) Grid colocaría tantas pistas 9em como fuera posible, pero luego las expandiría a un máximo de 1 fr hasta que se llene el contenedor:
Advertencia: La cuadrícula recalculará las pistas cuando se vuelva a cargar la página (intente aplastar la ventana del navegador y actualizar), pero no lo hará en el tamaño de la ventana. Las consultas de medios se pueden usar para alterar los valores, pero aún así no se reproducen bien con el cambio de tamaño de la ventana.
Vamos a terminar con algunas balas:
Accentsconagua
cuadrícula-plantillas-áreas (y otras cosas) para diferentes escenarios.autocompletar La palabra clave es útil para llenar contenedores de rejilla.mínimo máximo() funciones complementarias autocompletar muy bien, asegurarse de que los contenedores estén correctamente llenos, pero no nos da "capacidad de respuesta" en el verdadero sentido de la palabra.¡Con las lecciones aprendidas en esta serie, estás preparado para salir y comenzar a jugar con Grid! Manténgase atento a más tutoriales de Grid, ejercicios prácticos, soluciones a problemas comunes de diseño y actualizaciones..
