En la edad oscura, las máquinas de escribir construyeron sitios en las tablas. Luego dominaron el flotador y la caja flexible, y la oscuridad retrocedió. En 2017, la Ilustración comenzó con el advenimiento de CSS Grid Layout.
Grid tiene en cuenta el espacio horizontal y vertical, con él puede cambiar el diseño sin tocar el diseño, y todo esto sin consultas de medios. Con Grid, puede olvidarse de los números mágicos, los hacks, las soluciones y los marcos CSS.
A pesar de todo su poder, hay un pequeño matiz que arruina la imagen: los diseñadores de diseño todavía rara vez lo usan. Hay una especificación Grid, soporte de navegadores, pero pocos proyectos reales.
Acerca de esto es la transcripción del informe de
Sergey Popov sobre
Frontend Conf : sobre la especificación, sobre por qué los diseñadores de diseño le temen a Grid y cómo decidir usar la cuadrícula en sus proyectos para "¡Hacer que su sitio web vuelva a ser excelente!".
Sobre el orador : Sergey
Popovsergey, Director General de
Outsourcing de Desarrollo Frontend A. League de HTML Academy, desarrollador front-end, organizador comunitario moscowcss, coorganizador WSD y
pitercss_conf . Hasta que se convirtió en líder de la empresa, estuvo ocupado en la composición tipográfica durante muchos años.
Durante el año pasado, han aparecido muchos cursos e informes sobre Grid, sobre cómo usarlos y escribirlos. Si está cansado de los informes técnicos, agregaré uno más a su lista.
Broma: hablemos de cómics. O no?Nota : en lugar del largo "Diseño de cuadrícula CSS", simplemente habrá "Cuadrícula".
¿Qué pasa con CSS Grid Layout?
Técnicamente, Grid es una cuadrícula bidimensional simple.
Dibujar y usar una cuadrícula es bastante simple, pero los desarrolladores aún lo evitan. Veo dos razones para esto.
- Muchos simplemente no entienden lo que está sucediendo con Grid. Una gran cantidad de mitos sobre esta herramienta dificultan su comprensión.
- Nosotros, como tipográficos y vendedores frontales, no entendemos cómo y dónde usar Grid en las tareas cotidianas.
Comencemos el análisis desde el primer punto.
Especificación
La primera versión de la especificación se lanzó en 2012, cambió mucho, correspondió y, cinco años después, comenzó a introducirse activamente. En 2017, el mismo auge ocurrió cuando durante seis meses, Grid, desde el estado del primer borrador publicado, llegó a la conclusión de que Chrome lo implementó primero sin una bandera, y luego todos los demás navegadores. Debido a que la implementación se llevó a cabo rápidamente, la especificación no se resolvió y hubo que dejar algunos temas controvertidos para que los navegadores no tuvieran que reescribir la mitad del motor.
La especificación es estable, aunque todavía está en estado de Recomendación de candidato. Si pudiera, ya lo habría lanzado hace mucho tiempo, pero los desarrolladores de la especificación no tienen prisa, sino que complementan y cambian la redacción.
Apliquemos la especificación de diseño de cuadrícula no recomendada: esto no es una contradicción, porque la cuadrícula se implementó primero y luego se describió.
La segunda afirmación incorrecta es que la cuadrícula no tiene sentido sin el segundo nivel.
Especificación de segundo nivel
Cuando escribieron la especificación, resultó ser demasiado grande, por lo que una parte se asignó al segundo nivel.
Para 2018, la especificación de segundo nivel en el estado del Primer Borrador de Trabajo Público es la primera publicación de un borrador de trabajo.
La especificación se está trabajando activamente y en un futuro próximo pasará al estado Borrador de trabajo, un borrador de trabajo. Los desarrolladores esperan el lanzamiento de Grid, pero este es un proceso largo que puede prolongarse durante 5 años.
Según la leyenda, la especificación de segundo nivel resuelve los problemas del primer nivel. De hecho, agrega características que puede prescindir y nada le impide usar el primer nivel sin el segundo.
pantalla: subcuadrícula;
Antes de saber qué era la cuadrícula, cómo apareció la subcuadrícula. Averigüemos qué es.
Imagina este marcado.
Todo es bastante simple: tenemos una cuadrícula, tres elementos no semánticos y uno semántico integrados. La cuadrícula funciona como flexbox: cuando usa
display: grid; a un contenedor, se aplica solo a elementos en el primer nivel de anidamiento.
En el ejemplo 1, 2 y 3
<div> ocuparán un lugar en la cuadrícula, y todo lo que está dentro de la lista colapsará. Perderá todos estos elementos porque así es como funciona la cuadrícula.
Si desea que estos elementos sigan siendo parte de su cuadrícula, entonces hay dos opciones:
- La primera opción es deshacerse del envoltorio . Elimine
<ul> y reemplace <li> con <div> . Matamos la semántica, pero abandonamos la grilla.
- La segunda opción es usar
display: subgrid; .
Si aplica
display: subgrid; en la lista, los elementos
<li> pasarán a formar parte de esta cuadrícula,
<ul> , como un contenedor, serán ignorados. Obtendrá una cuadrícula completa y la semántica completa permanecerá: tanto HTML es bueno como CSS es bueno.
Un problema es que la
subcuadrícula no es compatible , está en algún lugar detrás de las banderas y se puede esperar el lanzamiento durante mucho tiempo.
pantalla: contenido;
En general, no es
necesario esperar , porque hay
display: contents; - una propiedad maravillosa que funciona igual que
display: subgrid; . Si para los elementos de la lista se aplica
display: contents; , los elementos
<li> pasarán a formar parte de la cuadrícula.
Hay un matiz:
display: contents; No es compatible con todos los navegadores.
Emulación de subcuadrícula CSS
Mientras se
display: contents; Para resolver el problema de soporte, los diseñadores de diseño encontraron una salida: hicieron una emulación de subcuadrícula.
En la diapositiva hay
un ejemplo de Pasha Lovtsevich .
En el ejemplo anterior, hay un comportamiento de subcuadrícula, pero su comportamiento no se emula a través de
display: subgrid; o
display: contents; , y debido a expresiones personalizadas, que se convierten en variables.
Las propiedades con guiones son propiedades personalizadas en CSS.El segundo nivel no es necesario.
Si alguien le dice que no use la cuadrícula hasta que salga el segundo nivel, no la escuche. El segundo nivel resuelve ciertos problemas que ya están resueltos de otras maneras.
No en todas partes necesitas una subcuadrícula. La cuadrícula junto con Flexbox a veces es mucho más fría que con la subcuadrícula.
Por lo tanto, no espere el segundo nivel, siéntase libre de hacer el primero. Por otra parte, él ya lo es.
Soporte de rejilla en navegadores
Esta imagen se puede mostrar si alguien le dice que la cuadrícula no es compatible.
Globalmente soporta el
87% de los navegadores, excepto Opera Mini, no admite nada.
Escribí a CanIuse , pedí que lo eliminara de la columna, para no estropear la imagen, pero hasta ahora fue en vano;)Si agrega
@supports , entonces todo funciona, incluso Opera Mini. No sé si Opera Mini es compatible con flexbox, pero allí puede hacer una reserva.
Hay un problema con IE. Como siempre, él está aquí con nosotros y no ha ido a ninguna parte.
IE y Grid
Si su aplicación es compatible con IE, podría decir que no puede usar la cuadrícula. Esto no es así:
Grid funciona en IE , ya que la especificación nació en Microsoft y apareció por primera vez en IE. Nadie lo usó hasta que la gente normal vino y reescribió la especificación.
IE está manejando la Grid, pero necesita explicar cómo hacerlo.
IE admite Grid en la versión anterior de la especificación , en la que no todas las propiedades son compatibles, pero parte se llama de manera diferente.
No necesita aprender la especificación de versión para IE, porque
Autoprefixer , un complemento que transfiere la nueva versión de la especificación a la anterior, hará la mayor parte del trabajo por usted. Por lo tanto, para proporcionar soporte de Grid en IE, usar Autoprefixer es suficiente.
El resto solo necesitas saberlo y recordarlo. Simplemente abra el artículo
"Soporte de CSS Grid en Internet Explorer" , lea qué propiedades son compatibles con IE y cuáles no, y decida cuál utilizará.
Recuerde "degradación elegante" cuando los elementos de los nuevos desaparecen en las versiones anteriores del navegador. Por ejemplo, en los navegadores que no admiten el radio del borde, las formas tendrán esquinas cuadradas. Los diseñadores de diseño se vieron obligados a recortar imágenes de formularios en lugar de CSS, y en algunas situaciones esto se consideró normal.
¿Por qué no convertir Grid a columnas normales en versiones anteriores de navegadores? Si está desarrollando para un navegador antiguo, no utilice tecnologías modernas o tolere el hecho de que el contenido en ellos se verá diferente.
Internet Explorer funciona bien con Grid, solo necesitas un poco de práctica. Si no usa Grid, porque le tiene miedo a IE, entonces tengo que sorprenderlo: no funcionará.
Errores y cuadrícula
Puede decir que hay muchos errores en la cuadrícula, pero no es así.
Rachel Andrew encontró
todos los errores en la cuadrícula CSS :
hay 14 en total , y eso es todo lo que hay. Nadie hace Grid Layout CSS más que Rachel, por lo que puedes confiar en ella.
Los errores son bastante específicos. Recordamos que cuando llegó Flexbox, también tenían errores, pero esto no nos detuvo. Los errores en la red tampoco nos detienen, especialmente.
"Algunos elementos HTML no pueden ser un contenedor de cuadrícula". Hay una aclaración de inmediato de que el botón no puede ser un contenedor Grid,
pero no queríamos esto .
"Textarea, cuando es un elemento de la cuadrícula, se derrumba". El problema se resuelve fácilmente si pones el ancho y la altura en porcentaje.
Estos errores son bastante específicos y no aparecen en todos los navegadores. Si sabe que puede ocurrir un error, simplemente tómalo y corríjalo, es fácil.
No hay muchas razones técnicas para no usar una cuadrícula. Los navegadores son compatibles, y en los navegadores antiguos usan "degradación elegante". Las razones teóricas también son pocas, porque hay más materiales que flexbox.
Teoría, o un pequeño programa educativo.
¡Grid está aquí! Podemos decir por mucho tiempo por qué no usamos Grid, pero mientras lee el artículo, Grid ya está implementado en producción.
Los sitios ya usan Grid. Por ejemplo, fui al sitio web de la Semana de Internet de Rusia, y este es el último lugar donde esperaba ver el Grid. Por lo general, los sitios de conferencias de negocios se reúnen en Tilda.
Además, usan más o menos correctamente la cuadrícula. RIW lo intentó, y lo hicieron, y sin fallas. Claramente apuntan a usuarios de navegadores modernos.
Las conferencias que hablan sobre CSS, en cualquier caso, intentan usar nuevas herramientas. Hicimos insignias en el sitio pitercss_conf, y los chicos de Minsk tienen la mitad del sitio en Grid.
La Semana de Internet en Rusia es una audiencia bastante limitada de visitantes. El New York Times lee a más personas.
Estoy seguro de que entre los lectores hay propietarios de dispositivos incluso con IE 9, 10, 11, pero la mitad del sitio está en la Red.
Me sorprendió ver que proyectos tan grandes usan Grid.
¿Por qué no se usa Grid en todas partes?
Nos dimos cuenta de que hay una especificación, se puede usar y no hay excusas que funcionen. Entonces, ¿cuál es el trato?
Hay ciertas razones para no usar mallas:
- Los diseñadores no plantean tareas insolubles para los diseñadores de diseño.
- Los diseñadores de diseño no entienden cómo aplicar Grid a proyectos reales. Lo más probable es que su diseñador no dibujó una cuadrícula compleja y no comprende cómo adjuntar una cuadrícula al diseño.
En cuanto a diseño
Ahora protegeré a los diseñadores.El diseño se desarrolla lentamente, de acuerdo con sus tendencias, no relacionado con el desarrollo de tecnologías web. Todo lo contrario: los tecnólogos web tienen que adaptarse a las tendencias de diseño. Es poco probable que los programadores digan: "Diseñadores, y tenemos una cuadrícula, pueden trabajar con ella", y dirían: "¡Oh, sí!" y comenzó a dibujar diseños para ellos.
Por lo tanto, la mayoría de los sitios se ven así.
Un ejemplo abstracto con una cuadrícula y columnas simples, nada inusual. El sitio es fácil de construir sin flexbox, en flotante, incluso puede sobrevivir con el diseño de la tabla.
Los diseñadores dejaron de plantear tareas complejas para los diseñadores de diseño, porque una vez nosotros mismos los arrinconamos por el hecho de que dejamos de hacer lo que quieren.
El diseñador viene a nosotros y dice:
-
¡Quiero una grilla complicada!-
No puedo. Ella es complicada-
No, hazlo .-
No puedo!Luego vamos al gerente, nos quejamos, y el diseñador recibe un golpe en la cabeza.
Eso es todo, el diseñador ya no dibuja cuadrículas complejas. Anteriormente, realmente no podíamos construir interfaces complejas, pero ahora podemos hacerlo: tenemos muchas herramientas. Ahora que el diseñador no quiere, dejó de pedir diseños complejos. El diseñador dibuja una interfaz para que el diseñador de diseño pueda implementarla, y a menudo de la manera más primitiva posible.
El blog
Daré un ejemplo común de nuestro outsourcing. El diseñador recibió la tarea de dibujar un blog y da rienda suelta a todos sus impulsos de la red. Dibuja un bloque grande, ancho, 3 pequeños, medianos, fantasean. Se ve genial y moderno.
El tipógrafo ve el diseño, escribe un contenedor, un segundo, un tercero en flexbox y obtiene esa imagen.
El diseño va al backend. El backender le dice al diseñador que tiene una conclusión de la base de datos, y allí las tarjetas van una tras otra, no se pueden expandir.
Esto termina la feliz historia y volvemos al diseñador.
Cuando el diseñador dibujó el diseño, presentó otras opciones. En las opciones hubo un vuelo de fantasía, y el back-end rompió ráfagas en un momento. El plan para hacer un hermoso blog falló.
Existen diferentes opciones de salida:
- El diseñador es enviado a una esquina lejana y dice: "Tendremos todo uno tras otro, podemos prescindir de tu show, hacer lo que se puede implementar en flexbox". El diseñador sufrirá , pero publicará un portafolio con una hermosa cuadrícula en Behance. En el diseño habrá un enlace a la producción, y solo hay cuadrados.
- La máquina de escribir cuelga un complemento jQuery que organiza automáticamente los elementos en una cuadrícula con posicionamiento absoluto: ¡todo está bien! Además, el complemento también cargará la página y se retrasará descaradamente en IE. Sin embargo, el diseñador y el back-end estarán encantados .
- El diseñador y el diseñador del diseño acordarán e implementarán una historia increíble y comprometerán el diseño, el backend y el diseño .
Caso real
Hay una grilla complicada en la página principal de la revista The Village. Está hecho intencionalmente para diferentes tipos de materiales. Sé sobre esto, ya que trabajé en una publicación.
"The Village" escribió un enorme algoritmo que genera una cuadrícula en el backend. Esta es una mezcla de flotación, posicionamiento absoluto y otras cosas aterradoras, ¡pero funciona!
A veces se rompe, pero cuando esto sucede, los bloques simplemente se reorganizan y todo vuelve a funcionar.
No puedo imaginar cuántas horas me llevó diseñar este sistema, depurarlo y hacerlo funcionar casi sin errores. ¿Cuánto tiempo llevaría implementar la misma cuadrícula si usa
display: grid; o
grid-auto-flow: dense; ? Dentro de la cuadrícula, hay una especificación separada que organiza automáticamente los elementos en la página, obstruye espacios vacíos e implementa una cuadrícula similar. No necesita diez mil líneas de código de fondo; todo funciona con una sola propiedad.
En el momento de la creación del algoritmo, esta tecnología no estaba allí, pero cuando se trataba de rediseñar, sugerí usar inmediatamente la cuadrícula.
"The Village" se confundió para hacer lo que quieren, pero la mayoría no. Por lo tanto, vemos una web normal, la estandarización, todo se reduce a un diseño. Solíamos tener Bootstrap, que describe la mayor parte del código. Ahora los diseñadores ya tienen sus propias herramientas, como Bootstrap, con las que construyen sitios.
Qué tontería, ¿dónde está la creatividad?Nuestra tarea no es aceptar el uso de Grid dentro de la comunidad, sino informarles a los diseñadores.
Mi sueño es hablar en una conferencia de diseño y decir: “¡Hola! ¡Nos hemos vuelto mejores! Somos inteligentes de nuevo ", pero no se les permite inventar codificadores en las conferencias de diseñadores. Decirle a los diseñadores que hemos mejorado no es tan difícil. Se te ocurrió una grilla simple, preguntas: “¿Por qué es simple y no complicado? ¡Puedo hacer cualquier cosa!
En términos de implementación
Grid parece difícil de encontrar. Cuando me dicen: “Tengo 3 columnas y puedo hacerlo en flexbox. ¿Por qué necesito una cuadrícula? ", Luego respondo:" De hecho, no ". Por lo tanto, existen dificultades con respecto a dónde aplicar la cuadrícula.
La cuadrícula no es solo una cuadrícula compleja
Este es un diseño simple que se puede hacer en Grid y más fácil que en flexbox, ya que no se necesita un contenedor adicional. A continuación se muestra un ejemplo en la cuadrícula, también se puede hacer en flexbox, pero necesita una gran cantidad de envoltorios adicionales o flujo, y se obtiene un verdadero desastre.
Cuadrícula: no para elementos pequeños : ya sea para
elementos pequeños muy complejos o para elementos grandes.
Rejilla para diseño
No conozco un solo sitio donde no puedas reescribir el diseño en la cuadrícula y guardar muchos envoltorios adicionales inútiles en esto.
- La cuadrícula se puede aplicar al diseño global.
- La cuadrícula se puede aplicar a los elementos de la interfaz.
Esta es la insignia pitercss_conf-2, está hecha en una cuadrícula.
La parte más difícil del diseño de cuadrícula es dibujar una cuadrícula que se adapte a usted. En este caso, esto no es solo 6 * 6, sino 5 * 8, sino que cada bloque tiene una altura y un ancho diferentes.
Vemos la tarea y componimos el contenido, muy similar a las guías en Photoshop. El diseñador dibujó y transferimos el diseño a la cuadrícula. Aquí no hay un contenedor adicional, solo elementos semánticos que se integran en la cuadrícula utilizando la cuadrícula.
La tarjeta de embarque se puede hacer en flexbox.
Y es posible en Grid, y en la versión móvil el cupón se ve diferente.
Rejilla para estructura
La segunda cosa importante para recordar:
usando la cuadrícula, simplemente puede cambiar la estructura .
Hay orden en flexbox, que le permite cambiar el orden de todos los elementos. Esta es una tecnología compleja, y cómo con los índices Z puede dispararse en el pie si no sabe cómo usarla.
La cuadrícula es simple. En este ejemplo, si no hubiera una cuadrícula, tendríamos que mover la parte derecha con el código QR a un posicionamiento absoluto. Y en Grid, son 13 líneas de código en la versión móvil.
Para comenzar a usar la cuadrícula, debe comenzar a usar la cuadrícula . Intente diseñar algunos elementos de su interfaz en la cuadrícula. Puede comenzar con los pequeños, puede comenzar con los globales para comprender cómo esto simplifica la vida.
Nadie te dirá: "¡Usa la cuadrícula aquí, pero no aquí!" Debe comprender y aprender a sí mismo, pero para esto necesita llenar los baches. Si la implementación de la tarea en el Grid tomó el doble de tiempo que en el flexbox, entonces esas tareas no necesitan ser resueltas en el Grid.
Aquí para los cómics, The Grid es perfecto.
Considere un problema no trivial.
Si profundiza en el código, queda claro cómo funciona todo. Los chicos programan en CSS y construyen las áreas de cuadrícula. Dependiendo del papel del jugador, él se eleva automáticamente al Área deseada. La alineación vertical y horizontal crea la construcción. Esta es toda la programación CSS. El problema se resuelve con 50 líneas de código CSS, que es mucho más fácil que a través de un backend o JS.
Quiero que los diseños y diseños sean divertidos, como este.
Este es un diseño demasiado complicado en la cuadrícula, porque la tarea era difícil. El diseñador de diseño no pudo dibujar el diseño en un simple flexbox, solo Grid. Era posible hacer menos celdas, pero dado que las celdas se construyen por repetición, no tomó mucho tiempo. Lo principal es que lo hicieron.
Está inventado intrincadamente, pero la interfaz está muy bien reconstruida en el futuro.
Que sigue
Dejemos de decirme a mí mismo, "No puedo" en términos de la cuadrícula . Puedes, simplemente no quieres. No hay una razón objetiva para no usar la cuadrícula, excepto por la pereza y la falta de voluntad para intentarlo.
Grid es un sistema tan universal que incluso es imposible crear un marco para él . Si ve que algún marco utiliza el diseño de cuadrícula, esto no tiene sentido, porque la propia cuadrícula es un marco para construir cuadrículas. Bootstrap es poco probable que cambie a Grid. Imagina que habrá 20 millones de clases, ¡una perversión!
Por lo tanto, nunca tendrá una solución preparada. Puede haber plantillas, pero no habrá reglas sobre dónde aplicar la cuadrícula y dónde no.
Aprender, ver ejemplos, desarrollar . No hay nada de malo en mirar los ejemplos de otras personas. Por ejemplo, lo hago.
Aportar conocimiento al equipo . Digamos que conoces la cuadrícula, sugiere usarla.
Dirígete al diseñador y dile: "¡Vamos a dibujar más interesante, y me daré cuenta de tus ideas!"
Dígale al gerente: "¡Podemos hacer más con Grid ahora!"
Comparta su conocimiento dentro del equipo y haga avanzar la web. En última instancia, tenemos un objetivo simple: ¡
hacer que la web sea mejor y más fresca !
Si en algún momento todo se simplificó, ahora hay nuevas tecnologías. No solo Grid son máscaras SVG, animaciones, transformaciones. El problema no está en la tecnología, sino en el hecho de que la mayoría todavía no usa la mitad. No sabemos todo o no queremos usar, y los diseñadores no saben lo que podemos.
Contactos de Sergey Popov: correo electrónico ,
Fb ,
twitterEste informe es uno de los mejores en Frontend Conf . Me gustó y quiero más: suscríbase al boletín , en el que recopilamos nuevos materiales y damos acceso a videos, y venimos a Frontend Conf RIT ++ en mayo.
Sabes más y estás listo para compartir tu experiencia, ¡excelente! Envíe resúmenes , los informes ya están abiertos y continuarán hasta el 27 de febrero.