Mejores prácticas con el diseño de cuadrícula CSS

Una pregunta cada vez más común, ahora que las personas usan CSS Grid Layout en producción, parece ser "¿Cuáles son las mejores prácticas?" La respuesta corta a esta pregunta es usar el método de diseño como se define en la especificación. Las partes particulares de la especificación que elige usar y, de hecho, cómo combina Grid con otros métodos de diseño como Flexbox, depende de lo que funcione para los patrones que está tratando de construir y cómo usted y su equipo quieren trabajar.

Mirando más profundamente, creo que tal vez esta solicitud de "mejores prácticas" quizás indique una falta de confianza en el uso de un método de diseño que es muy diferente al anterior. Tal vez una preocupación de que estamos usando Grid para cosas para las que no fue diseñado, o que no usamos Grid cuando deberíamos hacerlo. Tal vez se deba a preocupaciones sobre la compatibilidad con navegadores más antiguos o cómo encaja Grid en nuestro flujo de trabajo de desarrollo.

En este artículo, trataré de cubrir algunas de las cosas que podrían describirse como mejores prácticas y algunas cosas de las que probablemente no deba preocuparse.

La encuesta

Para ayudar a informar este artículo, quería saber cómo otras personas usaban Grid Layout en producción, cuáles fueron los desafíos que enfrentaron, qué fue lo que realmente les gustó. ¿Hubo preguntas, problemas o métodos comunes que se usaron? Para averiguarlo, preparé una encuesta rápida, haciendo preguntas sobre cómo las personas usaban Grid Layout y, en particular, qué les gustaba más y qué les resultaba desafiante.

En el artículo que sigue, haré referencia y citaré directamente algunas de esas respuestas. También tendré enlaces a muchos otros recursos, donde puede obtener más información sobre las técnicas descritas. Al final resultó que, había mucho más de un artículo con cosas interesantes para desglosar en las respuestas de la encuesta. Abordaré algunas de las otras cosas que surgieron en una publicación futura.

Accesibilidad

Si hay alguna parte de la especificación de Grid que debe tener cuidado al usar, es cuando use cualquier cosa que pueda causar el reordenamiento del contenido:

“Los autores deben usar el orden y las propiedades de ubicación de cuadrícula solo para el reordenamiento visual, no lógico, del contenido. Las hojas de estilo que usan estas características para realizar reordenamientos lógicos no son conformes”.

— Especificación de cuadrícula: reordenación y accesibilidad

Esto no es exclusivo de Grid, sin embargo, la capacidad de reorganizar el contenido tan fácilmente en dos dimensiones hace que sea un problema mayor para Grid. Sin embargo, si usa cualquier método que permita reordenar el contenido, ya sea Grid, Flexbox o incluso posicionamiento absoluto, debe tener cuidado de no desconectar la experiencia visual de cómo se estructura el contenido en el documento. Los lectores de pantalla (y las personas que navegan por el documento usando solo un teclado) seguirán el orden de los elementos en la fuente.

Los lugares en los que debe tener especial cuidado son cuando usa flex-direction para invertir el orden en Flexbox; la propiedad order en Flexbox o Grid; cualquier ubicación de los elementos de la Cuadrícula usando cualquier método, si mueve los elementos fuera del orden lógico en el documento; y usando el modo de empaquetamiento denso de grid-auto-flow .

Para obtener más información sobre este problema, consulte los siguientes recursos:

• Diseño de cuadrícula y accesibilidad - MDN
• Flexbox y la navegación del teclado se desconectan

¿Qué métodos de diseño de cuadrícula debo usar?

”Con tantas opciones en Grid, fue un desafío apegarse a una forma consistente de escribirlo (por ejemplo, nombrar líneas de cuadrícula o no, definir áreas de plantilla de cuadrícula, alternativas, consultas de medios) para que pudiera ser mantenido por todo el mundo. equipo."

—Michelle Barker

Cuando echa un vistazo a Grid por primera vez, puede parecer abrumador con tantas formas diferentes de crear un diseño. En última instancia, sin embargo, todo se reduce a que las cosas se coloquen de una línea de la cuadrícula a otra. Tiene opciones basadas en el diseño que está tratando de lograr, así como también en lo que funciona bien para su equipo y el sitio que está construyendo.

No hay manera correcta o incorrecta. A continuación, retomaré algunos de los temas comunes de confusión. También he cubierto muchas otras áreas potenciales de confusión en un artículo anterior "Grid Gotchas and Stumpbling Blocks".

¿Debo usar una cuadrícula implícita o explícita?

La cuadrícula que define con grid-template-columns y grid-template-rows se conoce como Explicit Grid. La cuadrícula explícita permite nombrar líneas en la cuadrícula y también le brinda la posibilidad de apuntar a la línea final de la cuadrícula con -1 . Elegirá una cuadrícula explícita para hacer cualquiera de estas cosas y, en general, cuando tenga un diseño completamente diseñado y sepa exactamente dónde deben ir las líneas de la cuadrícula y el tamaño de las pistas.

Uso la cuadrícula implícita con mayor frecuencia para las pistas de fila. Quiero definir las columnas, pero luego las filas tendrán un tamaño automático y crecerán para contener el contenido. Puede controlar la cuadrícula implícita hasta cierto punto con grid-auto-columns y grid-auto-rows , sin embargo, tiene menos control que si estuviera definiendo todo.

Debe decidir si sabe exactamente cuánto contenido tiene y, por lo tanto, la cantidad de filas y columnas, en cuyo caso puede crear una cuadrícula explícita. Si no sabe cuánto contenido tiene, pero simplemente quiere que se creen filas o columnas para contener lo que haya, usará la Cuadrícula implícita.

Sin embargo, es posible combinar los dos. En el CSS a continuación, he definido tres columnas en la cuadrícula explícita y tres filas, por lo que las primeras tres filas de contenido serán las siguientes:

• Una pista de al menos 200 px de altura, pero que se expande para hacer que el contenido sea más alto,
• Una pista fijada a 400 px de altura,
• Una pista de al menos 300 px de altura (pero se expande).

Cualquier contenido adicional irá a una fila creada en Implicit Grid, y estoy usando la propiedad grid-auto-rows para hacer que esas pistas tengan una altura de al menos 300 px, expandiéndose a auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Una cuadrícula flexible con un número flexible de columnas

Mediante el uso de notación repetida, autorrelleno y minmax, puede crear un patrón de tantas pistas como quepan en un contenedor, eliminando así la necesidad de Media Queries hasta cierto punto. Esta técnica se puede encontrar en este video tutorial y también se demuestra junto con ideas similares en mi artículo reciente "Uso de consultas de medios para el diseño receptivo en 2018".

Elija esta técnica cuando esté contento de que el contenido caiga debajo del contenido anterior cuando hay menos espacio, y esté contento de permitir mucha flexibilidad en el tamaño. Ha solicitado específicamente que sus columnas se muestren con un tamaño mínimo y que se completen automáticamente .

Hubo algunos comentarios en la encuesta que me hicieron preguntarme si las personas elegían este método cuando realmente querían una cuadrícula con un número fijo de columnas. Si termina con una cantidad impredecible de columnas en ciertos puntos de interrupción, es posible que sea mejor establecer la cantidad de columnas, y redefinirla con consultas de medios según sea necesario, en lugar de usar auto-fill o auto-fit .

¿Qué método de tamaño de pista debo usar?

Describí el tamaño de las pistas en detalle en mi artículo “¿Qué tan grande es esa caja? Comprender el tamaño en el diseño de cuadrícula”, sin embargo, a menudo recibo preguntas sobre qué método de tamaño de pista usar. En particular, me preguntan sobre la diferencia entre el tamaño porcentual y la unidad fr .

Si simplemente usa la unidad fr como se especifica, se diferencia del uso de un porcentaje porque distribuye el espacio disponible. Si coloca un elemento más grande en una pista, la forma en que funcionará el fr hasta es permitir que esa pista ocupe más espacio y distribuya lo que queda.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Para hacer que la unidad fr distribuya todo el espacio en el contenedor de cuadrícula, debe darle un tamaño mínimo de 0 usando minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Por lo tanto, puede optar por usar fr en cualquiera de estos escenarios: aquellos en los que desea una distribución del espacio a partir de una base automática (el comportamiento predeterminado) y aquellos en los que desea una distribución equitativa. Por lo general, usaría la unidad fr , ya que luego calcula el tamaño para usted y permite el uso de pistas o espacios de ancho fijo. La única vez que uso un porcentaje es cuando agrego componentes de cuadrícula a un diseño existente que también usa otros métodos de diseño. Si quiero que mis componentes de cuadrícula se alineen con un diseño basado en flotación o flexión que usa porcentajes, usarlos en mi diseño de cuadrícula significa que todo usa el mismo método de tamaño.

¿Colocar elementos automáticamente o establecer su posición?

A menudo encontrará que solo necesita colocar uno o dos elementos en su diseño, y el resto encaja en su lugar según el orden del contenido. De hecho, esta es una muy buena prueba de que no ha desconectado la fuente y la pantalla visual. Si las cosas caen en su posición según la colocación automática, entonces probablemente estén en buen orden.

Sin embargo, una vez que he decidido dónde va todo, tiendo a asignar una posición a cada cosa. Esto significa que no termino con cosas extrañas si alguien agrega algo al documento y la cuadrícula lo coloca automáticamente en algún lugar inesperado, descartando así el diseño. Si todo está colocado, Grid colocará ese elemento en la siguiente celda de cuadrícula vacía disponible. Es posible que no esté exactamente donde lo desea, pero sentarse al final de su diseño probablemente sea mejor que aparecer en el medio y empujar otras cosas.

¿Qué método de posicionamiento usar?

Cuando se trabaja con Grid Layout, en última instancia, todo se reduce a colocar elementos de una línea a otra. Todo lo demás es esencialmente una ayuda para eso.

Decida con su equipo si desea nombrar líneas, usar áreas de plantilla de cuadrícula o si va a usar una combinación de diferentes tipos de diseño. Encuentro que me gusta usar áreas de plantilla de cuadrícula para componentes pequeños en particular. Sin embargo, no hay bien o mal. Averigua qué es lo mejor para ti.

Grid en combinación con otros mecanismos de diseño

Recuerde que Grid Layout no es el único método de diseño verdadero para gobernarlos a todos, está diseñado para un determinado tipo de diseño, es decir, diseño bidimensional. Todavía existen otros métodos de diseño y debe considerar cada patrón y lo que se adapta mejor.

Creo que esto es bastante difícil para aquellos de nosotros que estamos acostumbrados a modificar los métodos de diseño para que hagan algo para lo que no fueron diseñados. Es un muy buen momento para dar un paso atrás, mirar los métodos de diseño para las tareas para las que fueron diseñados y recordar usarlos para esas tareas.

En particular, no importa con qué frecuencia escriba sobre Grid versus Flexbox, me preguntarán cuál debería usar la gente. Hay muchos patrones en los que cualquier método de diseño tiene mucho sentido y realmente depende de usted. Nadie te va a gritar por seleccionar Flexbox sobre Grid o Grid sobre Flexbox.

En mi propio trabajo, tiendo a usar Flexbox para componentes en los que quiero que el tamaño natural de los elementos controle fuertemente su diseño, esencialmente empujando a los otros elementos. También uso a menudo Flexbox porque quiero alineación, dado que las propiedades de Alineación de cuadro solo están disponibles para usar en Flexbox y Grid. Es posible que tenga un contenedor Flex con un elemento secundario, para poder alinear ese elemento secundario.

Una señal de que tal vez Flexbox no es el método de diseño que debo elegir es cuando empiezo a agregar anchos porcentuales a los elementos flexibles y establecer flex-grow en 0. La razón para agregar anchos porcentuales a los elementos flexibles es a menudo porque estoy tratando de alinear en dos dimensiones (alinear las cosas en dos dimensiones es exactamente para lo que sirve Grid). Sin embargo, pruebe ambos y vea cuál parece adaptarse mejor al contenido o al patrón de diseño. Es poco probable que cause algún problema al hacerlo.

Cuadrícula de anidamiento y elementos flexibles

Esto también surge mucho, y no hay absolutamente ningún problema en hacer que un elemento de cuadrícula también sea un contenedor de cuadrícula, anidando así una cuadrícula dentro de otra. Puede hacer lo mismo con Flexbox, creando un artículo flexible y un contenedor flexible. También puede convertir un elemento de cuadrícula y un contenedor flexible o un elemento flexible en un contenedor de cuadrícula. ¡Ninguna de estas cosas es un problema!

Lo que no podemos hacer actualmente es anidar una cuadrícula dentro de otra y hacer que la cuadrícula anidada use las pistas de cuadrícula definidas en el padre general. Esto sería muy útil y es lo que las propuestas de subred en el Nivel 2 de la Especificación de red esperan resolver. Actualmente, una cuadrícula anidada se convierte en una nueva cuadrícula, por lo que debe tener cuidado con el tamaño para asegurarse de que se alinee con las pistas principales.

Puede tener muchas cuadrículas en una página

Apareció un comentario varias veces en la encuesta que me sorprendió, parece haber una idea de que una cuadrícula debería limitarse al diseño principal, y que muchas cuadrículas en una página quizás no eran algo bueno. ¡Puedes tener tantas cuadrículas como quieras! Use grid para cosas grandes y pequeñas, si tiene sentido presentarlo como una grilla, entonces use Grid.

Retrocesos y compatibilidad con navegadores más antiguos

“El uso de Grid junto con @supports nos ha permitido controlar mejor la cantidad de variaciones de diseño que podemos esperar ver. También ha funcionado muy bien con nuestro enfoque de mejora progresiva, lo que significa que podemos recompensar a aquellos con navegadores modernos sin impedir el acceso al contenido a aquellos que no utilizan la última tecnología”.

— Joe Lambert trabajando en rareloop.com

En la encuesta, muchas personas mencionaron navegadores más antiguos, sin embargo, hubo una división razonablemente igual entre aquellos que sintieron que era difícil admitir navegadores más antiguos y aquellos que sintieron que era fácil debido a las consultas de funciones y al hecho de que Grid anula otros métodos de diseño. He escrito extensamente sobre la mecánica de la creación de estas alternativas en "Uso de CSS Grid: compatibilidad con navegadores sin Grid".

En general, los navegadores modernos son mucho más interoperables que sus contrapartes anteriores. Tendemos a ver muchos menos "errores del navegador" reales y si usa HTML y CSS correctamente, generalmente encontrará que lo que ve en un navegador es lo mismo que en otro.

Por supuesto, tenemos situaciones en las que un navegador aún no ha enviado soporte para una determinada especificación, o algunas partes de una especificación. Con Grid, hemos sido muy afortunados porque los navegadores enviaron Grid Layout de una manera muy completa e interoperable con poco tiempo de diferencia. Por lo tanto, nuestras consideraciones para las pruebas suelen ser la necesidad de probar los navegadores con Grid y sin Grid. Es posible que también haya optado por utilizar la versión con el prefijo -ms en IE10 e IE11, lo que requeriría probarlo como un tercer tipo de navegador.

Los navegadores que admiten el diseño de cuadrícula moderno (no la versión de IE) también admiten consultas de funciones. Esto significa que puede probar el soporte de Grid antes de usarlo.

Probar navegadores que no son compatibles con Grid

Cuando utilice recursos alternativos para navegadores sin soporte para Grid Layout (o use la versión con el prefijo -ms para IE10 y 11), querrá probar cómo esos navegadores representan Grid Layout. Para hacer esto, necesita una forma de ver su sitio en un navegador de ejemplo.

No tomaría el enfoque de romper su consulta de funciones buscando soporte de algo sin sentido o escribiendo mal la grid de valores. Este enfoque solo funcionará si su hoja de estilo es increíblemente simple y ha puesto absolutamente todo lo que tiene que ver con su diseño de cuadrícula dentro de las consultas de funciones. Esta es una forma de trabajar muy frágil y que requiere mucho tiempo, especialmente si está utilizando Grid de forma extensiva. Además, un navegador antiguo no solo carecerá de compatibilidad con Grid Layout, sino que también habrá otras propiedades de CSS que no serán compatibles. Si está buscando "mejores prácticas", ¡entonces prepararse para estar en una buena posición para probar su trabajo es lo más alto!

Hay un par de formas sencillas de configurarse con un método adecuado para probar sus respaldos. El método más fácil, si tiene una conexión a Internet razonablemente rápida y no le importa pagar una tarifa de suscripción, es usar un servicio como BrowserStack. Este es un servicio que permite ver sitios web (incluso aquellos en desarrollo en su computadora) en una gran cantidad de navegadores reales. BrowserStack ofrece cuentas gratuitas para proyectos de código abierto.

Para probar localmente, mi sugerencia sería usar una máquina virtual con su navegador de destino instalado. Microsoft ofrece descargas gratuitas de máquinas virtuales con versiones de IE hasta IE8 y también Edge. También puede instalar en la máquina virtual una versión anterior de un navegador que no admita Grid en absoluto. Por ejemplo, obteniendo una copia de Firefox 51 o inferior. Después de instalar tu antiguo Firefox, asegúrate de desactivar las actualizaciones automáticas como se explica aquí, ya que de lo contrario se actualizará automáticamente.

Luego puede probar su sitio en IE11 y en Firefox no compatible en una VM (una solución mucho menos frágil que los valores mal escritos). La configuración puede llevarte una hora más o menos, pero entonces estarás en un lugar realmente bueno para probar tus respaldos.

Desaprender viejos hábitos

“Era la primera vez que usaba Grid Layout, por lo que había muchos conceptos que aprender y comprender las propiedades. Conceptualmente, lo más difícil fue desaprender todo lo que había hecho durante años, como limpiar flotadores y empacar todo en contenedores div”.

— Hidde trabajando en hiddedevries.nl/en

Muchas de las personas que respondieron a la encuesta mencionaron la necesidad de desaprender viejos hábitos y cómo el aprendizaje de Layout sería más fácil para las personas completamente nuevas en CSS. Tiendo a estar de acuerdo. Al enseñar a las personas en persona, los principiantes completos tienen pocos problemas para usar Grid, mientras que los desarrolladores experimentados se esfuerzan por devolver la cuadrícula a un método de diseño unidimensional. He visto intentos de "sistemas de cuadrícula" utilizando CSS Grid que agregan envoltorios de fila necesarios para una cuadrícula flotante o basada en flexión.

No tengas miedo de probar nuevas técnicas . Si tiene la capacidad de probar en algunos navegadores y está atento a los posibles problemas de accesibilidad, realmente no puede equivocarse demasiado. Y, si encuentra una excelente manera de crear un determinado patrón, infórmeselo a todos los demás. Todos somos nuevos en el uso de Grid en la producción, por lo que ciertamente hay mucho por descubrir y compartir.

“Grid Layout es el desarrollo de CSS más emocionante desde las consultas de medios. Ha sido muy bien pensado para las necesidades de los desarrolladores del mundo real y es un placer absoluto usarlo en producción, tanto para diseñadores como para desarrolladores”.

— Trys Mudford trabajando en trysmudford.com

Para concluir, ¡aquí hay una lista muy breve de las mejores prácticas actuales! Si ha descubierto cosas que funcionan o no funcionan bien en su propia situación, agréguelas a los comentarios.

1. Esté muy atento a la posibilidad de reordenar el contenido. Compruebe que no ha desconectado la pantalla visual del pedido de documentos.
2. Pruebe utilizando navegadores de destino reales con una máquina virtual local o remota.
3. No olvide que los métodos de diseño más antiguos siguen siendo válidos y útiles. Pruebe diferentes formas de lograr patrones. No se obsesione con tener que usar Grid.
4. Sepa que, como desarrollador front-end experimentado, es probable que tenga un conjunto completo de ideas preconcebidas sobre cómo funciona el diseño. Trate de ver estos nuevos métodos de nuevo en lugar de obligarlos a volver a los viejos patrones.
5. Sigue probando cosas. Todos somos nuevos en esto. Pon a prueba tu trabajo y comparte lo que descubras.