La siguiente es una publicación invitada de Oliver Williams. Oliver ha estado trabajando con el diseño de cuadrícula CSS y ha aprendido bastante a lo largo del camino. En este artículo, va a saltar a diferentes conceptos que ha aprendido en ese viaje. Me gusta esta idea de aprender pequeños fragmentos sobre el diseño de cuadrículas, a través de ejemplos aislados cuando sea posible. Eso hace que aprender todo sea un poco menos intimidante.
La cuadrícula CSS parece estar lista para aterrizar en los navegadores a principios de 2017. Hasta entonces, deberá habilitar la cuadrícula para que funcione. (excepto en Firefox Nightly donde está habilitado de forma predeterminada). Chrome Canary tiene actualmente la mejor implementación. Mientras tanto, Firefox tiene un complemento invaluable llamado CSS Grid Inspector, que puede mostrar las líneas de su cuadrícula. Actualmente, es el único navegador que tiene una herramienta de este tipo.
En Chrome, ingrese `chrome: // flags` en la barra de direcciones, busque ‘Habilitar funciones experimentales de la plataforma web’ y haga clic en habilitar. IE y Edge tienen implementaciones antiguas diferentes de la especificación actual y, por lo tanto, no se recomiendan para experimentar con la cuadrícula en este momento.
No puedes tener áreas de cuadrícula en forma de tetris
Resolverás esto bastante rápido por ti mismo.
Las áreas de la cuadrícula solo pueden ser rectángulos (como la izquierda), no polígonos arbitrarios (como la derecha).
Grid está diseñado para usarse con flexbox, no en su lugar
Grid y flexbox pueden actuar de manera similar. Es posible que haya visto personas que utilizan flexbox para construir sistemas de cuadrícula, pero no fue para eso que se diseñó flexbox. Vale la pena leer la publicación del blog de Jake Archibald No use flexbox para el diseño general de la página.
Una forma rápida de pensar en ello es:
- Flexbox es para diseño unidimensional (fila o columna).
- La cuadrícula CSS es para diseño bidimensional.
O como dijo Rachel Andrews:
Flexbox es esencialmente para colocar elementos en una sola dimensión: en una fila O en una columna. La cuadrícula es para el diseño de elementos en dos dimensiones: filas Y columnas.
También se pueden combinar. Puede convertir un elemento de la cuadrícula en un contenedor flexible. Puede convertir un elemento flexible en una cuadrícula.
Tomemos un ejemplo útil. Queremos centrar verticalmente el texto dentro de un elemento de la cuadrícula, pero queremos que el fondo (ya sea un color, un degradado o una imagen) cubra todo el área de la cuadrícula. Podemos usar el align-items propiedad con un valor de centro pero ahora el fondo no llena toda el área del elemento. El predeterminado para align-items es stretch – Tan pronto como lo establezca en cualquier otro valor, ya no ocupará el espacio. En su lugar, dejemos que se estire y convierta nuestro elemento de cuadrícula en un contenedor flexible.
.grid {
align-items: stretch;
}
.griditem {
display: flex;
align-items: center;
}Usar números de línea negativos puede ser realmente útil
Imagine un marco de cuadrícula CSS actual con una cuadrícula de 12 columnas. En las pantallas pequeñas, en lugar de reducir el número de columnas, se le dice al contenido que abarque las doce columnas, dando la impresión de ser una sola columna de ancho completo.
Podrías hacer este mismo tipo de cosas con grid:
/* For small screens */
.span4, .span6, .spanAll {
grid-column-end: span 12;
}
/* For large screens */
@media (min-width: 650px) {
.span4 {
grid-column-end: span 4;
}
.span6 {
grid-column-end: span 6;
}
}No hay nada de malo en este enfoque. Sin embargo, con la cuadrícula CSS, es tan fácil redefinir el número de columnas. Al usar -1, puede estar seguro de que su contenido siempre llegará al final.
/* For small screens */
.span4, .span6, .spanAll {
grid-column-end: -1;
}Para una pantalla grande, es posible que desee hasta doce columnas. Para un móvil, entre uno y cuatro. Es fácil cambiar el grid-template-columns valor con una consulta de medios.
.grid {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
.grid {
grid-template-columns: repeat(12, 1fr);
}
}Es probable que haya algunos elementos que queramos distribuir en toda la ventana gráfica para todos los tamaños de pantalla, como quizás el encabezado, el pie de página o algunas imágenes de héroe.
Para pantallas pequeñas podríamos escribir:
.wide {
grid-column: 1 / 3; /* start at 1, end at 3 */
}Sin embargo, una vez que hagamos nuestra consulta de medios, estos elementos cubrirán solo las dos primeras columnas de doce columnas. Podríamos incluir el nuevo deseado grid-column-end valor de 13 en la misma consulta de medios, pero hay un método mucho más sencillo. Simplemente establezca el valor final en -1 y abarcará todas las columnas, sin importar cuántas haya. Me gusta:
.wide, .hero, .header, .footer {
grid-column: 1 / -1;
}Vea las consultas de medios Pen Easier con -1 por CSS GRID (@cssgrid) en CodePen.
Las áreas de cuadrícula crean nombres de líneas implícitos
Las áreas de plantilla de cuadrícula con nombre y los números de línea de cuadrícula son dos formas de colocar contenido en la cuadrícula, pero puede usar ambos métodos de ubicación en la misma cuadrícula. También puede hacer uso de los nombres de línea implícitos que se crean cada vez que designa un área de cuadrícula.
.grid {
grid-template-areas: "main main sidebar sidebar";
}Con este código, acabamos de crear cuatro nombres de línea implícitos: main-start, main-end, sidebar-start y sidebar-end.
Esto puede resultar útil si desea superponer contenido en varias áreas de la cuadrícula o en una subsección particular de un área de la cuadrícula.
Vea los nombres de línea implícitos de Pen con áreas de cuadrícula por Programar Plus(@ css-tricks) en CodePen.
Hay una segunda forma de definir áreas de cuadrícula.
Al igual que las áreas de cuadrícula crean nombres de líneas, los nombres de líneas específicos pueden crear áreas de cuadrícula. La sintaxis para definir áreas de cuadrícula se ve así:
.grid {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}Esta sintaxis puede resultar algo difícil de manejar si tiene mucho espacio vacío en su diseño (¡Demasiados puntos! Los puntos, en lugar de un nombre, significan una celda vacía). Es posible que no sepa que hay otra forma de definir áreas de cuadrícula. Podemos nombrar las líneas de la cuadrícula como queramos. Sin embargo, si seguimos la convención de nomenclatura [name-start] y [name-end] podemos crear áreas de cuadrícula. He aquí un ejemplo:
.grid {
display: grid;
grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px;
grid-template-rows: 100px [main-start] 100px [main-end] 100px;
}
.griditem1 {
background-color: red;
grid-area: main;
}Vea el lápiz Otra forma de definir áreas de cuadrícula mediante CSS GRID (@cssgrid) en CodePen.
Probablemente no diseñaría una página completa de contenido con este método, pero si desea combinar grid-area ubicación con ubicación basada en el número de línea, es bueno saberlo.
Use vmin para un diseño de caja de igual tamaño
La cuadrícula CSS le permite usar cualquier unidad de tamaño para sus filas y columnas. ¿Quiere cajas de igual tamaño pero también quiere que respondan? Si desea contenido que cambie de tamaño con el contenedor, puede usar unidades de ventana gráfica.
.grid {
grid-template-columns: repeat(5, 20vw);
grid-template-rows: repeat(5, 20vh);
}Esto funcionaría perfectamente en computadoras de escritorio y portátiles, pero en teléfonos móviles donde la altura de la pantalla excede el ancho, nuestro contenido se desbordará creando una barra de desplazamiento horizontal. Dudley Storey escribió recientemente una publicación de blog sobre la utilidad de una unidad CSS menos conocida: vmin. Esta unidad será un porcentaje del ancho de la ventana en una pantalla con orientación vertical y un porcentaje de la altura de la vista en una pantalla con orientación horizontal.
.gridcontainer {
display: grid;
width: 100vw;
height: 100vh;
justify-content: center;
align-content: center;
grid-template-columns: repeat(5, 20vmin);
grid-template-rows: repeat(5, 20vmin);
}Ahora tenemos cajas de igual tamaño que se adaptan a cualquier tamaño de pantalla.
Consulte el diseño de Pen Boxy con CSS Grid y vmin de CSS GRID (@cssgrid) en CodePen.
Posicionamiento absoluto
Cuando coloca absolutamente un elemento de la cuadrícula, en lugar de que su contexto de posicionamiento sea su contenedor (es decir, la cuadrícula completa), podemos colocarlo en relación con las líneas de inicio y final de la columna de cuadrícula y la fila de cuadrícula especificadas. Como siempre, position: absolute elimina un elemento del flujo del documento (es decir, es ignorado por otros elementos). Esto hace que el posicionamiento absoluto sea útil si desea superponer elementos de la cuadrícula sin interrumpir el algoritmo de colocación automática de las cuadrículas. La colocación automática hace todo lo posible para no superponer elementos a menos que declare explícitamente tanto un grid-column-start y grid-row-start valor para cada artículo.
Intenta eliminar position: absolute; del div en este ejemplo y piense en cuántos elementos tendría que definir las propiedades de la columna de la cuadrícula y la fila de la cuadrícula.
Vea el Pen conservando la colocación automática con posición: absoluta por CSS GRID (@cssgrid) en CodePen.
El orden funciona de manera diferente a cómo podría pensar
Si ha usado el flexbox order propiedad, entonces ya tiene esto cubierto. Todos los elementos de la cuadrícula tienen un valor de pedido predeterminado de 0. Entonces order: 1; aplicado a un elemento de la cuadrícula haría después de todo lo demás, no antes.
Puede utilizar números negativos para empujar elementos al frente.
Vea el valor de Orden de la pluma por CSS GRID (@cssgrid) en CodePen.
Los límites de minmax
¿Quiere columnas que dividan equitativamente el espacio entre sí hasta que alcancen un ancho máximo? Podrías pensar que podrías usar minmax() al igual que:
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(1fr, 300px));
}Desafortunadamente, eso no va a funcionar. Si max tiene un valor menor que min, se ignora. El fr no es válido como valor mínimo en minmax(). Sin embargo, es un comportamiento muy fácil de lograr. La palabra auto, cuando se utiliza como valor en grid-template-columns o grid-template-rows, hará que la columna o fila sea tan grande como su contenido.
Vea el Pen El valor de auto vs fr por CSS GRID (@cssgrid) en CodePen.
Entonces podemos establecer un max-width sobre el contenido:
.grid {
display: grid;
grid-template-columns: repeat(3, auto);
}
.item {
max-width: 300px;
}Vea el lápiz Los límites de minmax por CSS GRID (@cssgrid) en CodePen.
Puede haber buenas razones para el camino minmax() funciona y casos de uso en los que no había pensado. Aun así, escribí una publicación completa en Medium titulada The One Thing I Hate About Grid.
Las cosas son mucho más fáciles si nombra sus líneas de cuadrícula
Hay varios enfoques que puede tomar. Si realmente te gusta teclear, puedes darle a las líneas varios nombres.
.grid {
grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}La convención de nomenclatura más sencilla utiliza la numeración automática de cuadrículas. No tenemos que escribir [col2], podemos simplemente escribir el nombre col seguido de un número.
.griditem1 {
grid-column-start: col 2;
}Combinado con la palabra clave span, podemos dejar de pensar en los números de línea y empezar a pensar en términos de la primera columna que queremos que llene nuestro contenido y cuántas columnas queremos ocupar, lo cual es mucho más intuitivo.
.grid {
grid-template-columns: repeat(4, [col] 100px);
}
.griditem1 {
grid-column: col 2 / span 2;
}La unidad fr elimina la necesidad de matemáticas
Digamos que queremos dividir nuestra cuadrícula en cuatro columnas iguales. Es fácil calcular los porcentajes. Solo escribimos grid-template-columns: 25% 25% 25% 25%.
¿Y si luego queremos hacer uso de la grid-gap ¿propiedad? grid-gap: 10px. Tenemos tres espacios entre nuestras columnas, por lo que nuestro ancho de cuadrícula ahora será 100% + 30px y aparecerá un desplazamiento horizontal no deseado con algo de contenido que se desbordará en la pantalla en el lado derecho. Podríamos hacer uso de calc para resolver nuestro problema, pero usar la unidad fr es mucho más fácil: grid-template-columns: 1fr 1fr 1fr 1fr.
Vea la unidad Pen fr vs porcentaje por CSS GRID (@cssgrid) en CodePen.
La segunda cosa que odio de la cuadrícula
No hay forma de forzar que el algoritmo de colocación automática deje algunas columnas o filas vacías
El grid-gap Los valores proporcionan una manera fácil de espaciar nuestro contenido. Si bien podemos especificar un valor separado para dividir nuestras columnas y nuestras filas con grid-row-gap y grid-column-gap, estos valores deben ser uniformes. Si queremos separar nuestra primera y segunda fila por diez píxeles y nuestra segunda y tercera fila por 50 píxeles, la cuadrícula no nos ofrece ninguna forma de hacerlo, excepto creando filas y manteniéndolas vacías.
Es posible que haya visto los puntos / puntos en el grid-template-areas sintaxis:
grid-template-areas:
"header header header"
"main main main"
" . . ."
"secondary secondary secondary"
"footer footer footer";Esto podría haber proporcionado una forma sencilla de controlar el algoritmo de colocación automática para evitar que coloque elementos en estas áreas. Desafortunadamente, no funciona así: esta sintaxis simplemente denota que no queremos convertir la tercera fila en un área de cuadrícula con nombre. Los elementos colocados automáticamente terminarán allí.
Algunos consejos de diseño: no necesita necesariamente 12 columnas (y las columnas no necesitan ser de tamaño uniforme)
Doce columnas es el valor predeterminado del diseño web. La cuadrícula Bootstrap usa 12 columnas y casi todos los demás marcos de cuadrícula que existen actualmente. Hay una buena razón para esto: doce es divisible por tres y cuatro, lo que brinda más flexibilidad en la forma en que podemos distribuir el contenido en la página. Podemos dividir nuestro contenido de manera uniforme en 12 partes, 6 partes, 4 partes, 3 partes o por la mitad.
Si bien a algunas personas les gusta la familiaridad que viene con el uso constante de la misma cuadrícula para cada proyecto, no es necesario tener más columnas de las que realmente necesita y debe crear la cuadrícula adecuada para su contenido y el diseño deseado en lugar de un tamaño único -se adapta a toda la configuración.
Eche un vistazo a los ejemplos en Gridset. Gridset es una herramienta útil para crear cuadrículas, pero una vez que aterrice el módulo de cuadrícula CSS nativo, no necesitará herramientas como esta. Muestra algunas rejillas de excelente diseño.
Me tomé la libertad de rehacer uno usando las cuadrículas CSS:
Vea el diseño de texto del lápiz con el módulo CSS Grid de CSS GRID (@cssgrid) en CodePen.