Cualquiera que haya realizado al menos un poco de desarrollo de sitios web sabe que las etiquetas
<div> son un componente importante para controlar el diseño.
HTML5 introdujo nuevos elementos semánticos para ayudar con esto. Y aunque son una adición fantástica al lenguaje, son un poco como decorar nuestra sopa con elementos
<div> .
Con el advenimiento de CSS Grid, ya no necesitamos depender de elementos
<div> para crear una estructura de página o un componente aún más complejo. La estructura está literalmente determinada por el elemento padre, no por cómo se encuentra el contenido dentro de él.
Esto significa que podemos obtener un diseño simple y agradable que estructura el contenido sin prestar atención a cómo se organizó originalmente utilizando los elementos
<div> .
CSS Grid puede ser complicado, pero también Flexbox
He escuchado a muchas personas quejarse de que Grid es demasiado complejo y que Flexbox hace el mismo trabajo. Diría que se sienten cómodos usando Flexbox y, por lo tanto, no desean aprender más sobre CSS Grid.
La tecnología CSS Grid introduce muchas propiedades y valores nuevos, así que sí, hay una curva de aprendizaje. Pero Flexbox también es bastante complicado.
¿Puede hablar sobre los beneficios de usar la propiedad de
flex-basis lugar del
width ? ¿O cómo calcula Flexbox el ancho de los elementos flexibles si no lo hemos definido explícitamente?
Por ejemplo, si muestra el ejemplo a continuación a alguien que nunca ha usado Flexbox, ¿cómo explica el hecho de que tiene el mismo diseño y estilos para ambos conjuntos de columnas? Para empeorar las cosas, la segunda columna en ambos casos tiene un ancho del 50%. Obviamente, un ancho del 50% en realidad no establece el tamaño del elemento al 50%.
"Bueno, todo comienza con el hecho de que los elementos se comprimen si no hay suficiente espacio en el contenedor, por lo tanto, incluso si establecemos el ancho del elemento = 50%, no tiene suficiente espacio, por lo que comienza a comprimir para apretar en el contenedor, ya que el otro
<div> requiere más espacio. Es más probable que el 50% sea el tamaño ideal para el bloque, pero no el tamaño real ".
“Por lo tanto, en el ejemplo anterior, el contenido del primer bloque es tan grande que crea un problema porque, como elemento flexible, por defecto tiende a reducirse para acomodar el contenido. En este ejemplo, este elemento tiene mucho contenido, así que ...
Entonces sí, flexbox es excelente y hace un gran trabajo al crear diseños, pero no me digas que es simple. Tan pronto como pasa de ejemplos ideales a tareas de trabajo, este comportamiento a menudo está lejos de la comprensión intuitiva, y a veces puede ser francamente extraño.
Una cuadrícula es compleja porque implica muchas propiedades y valores nuevos, pero nos dan mucho más control que flexbox.
En este artículo, me gustaría considerar cómo este nivel adicional de control ayuda a simplificar nuestro marcado y nos permite escribir menos código, todo sin siquiera tener que aprender a usar varias de sus extrañas funciones.
Limitaciones de Flexbox
Incluso si tomamos un componente simple y lo creamos usando flexbox, debido al hecho de que actúa solo en 1 dimensión (los elementos flexibles son filas o columnas, no pueden ser ambos), tenemos mucho El número de elementos utilizados para crear filas, que luego se pueden dividir en columnas.
Por ejemplo, si estamos trabajando en una tarjeta como esta:
Este no es un diseño complicado, pero aún necesitamos organizar nuestro contenido de una manera bastante específica para que funcione.
Los bloques amarillo y naranja en esta situación son necesarios para que al agregar la propiedad display: flex para el elemento .card (bloque rojo), se creen dos columnas. Por lo tanto, para estructurar todo el contenido, obtenemos un marcado que se parece a esto:
<div class="card"> <div class="profile-sidebar"> </div> <div class="profile-body"> </div> </div>
Una vez que comprenda cómo funciona Flexbox, comprender esta estructura será fácil.
Cuando agregamos la propiedad
display: flex para el elemento
.card , obtenemos dos columnas, después de lo cual necesitaremos estilizar cada una de ellas por separado.
Aquí hay un ejemplo de trabajo con todos los estilos:
El hecho es que cuando creamos columnas de contenido, obtenemos un marcado un poco más complicado, y también nos limitamos, ya que obligamos a diferentes partes del contenido a agruparse.
Simplifica todo con CSS Grid
Dado que CSS Grid es bidimensional, nos permite crear filas y columnas al mismo tiempo, lo que significa que el contenedor de cuadrícula (en el que configuramos la propiedad
display: grid ) tiene control total sobre el diseño interior.
Anteriormente, esto requería elementos adicionales, como en el ejemplo de Flexbox anterior. Usando la cuadrícula, podemos deshacernos de ellos por completo.
<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div>
Desde el punto de vista del marcado, ¿eso no tiene más sentido?
Hay un elemento con la clase
.card en el que ponemos sus contenidos inmediatos. No necesitamos preocuparnos por la estructura y el diseño de los elementos, simplemente colocamos el contenido que necesitamos y seguimos adelante.
Estructurando el diseño
Al igual que cuando usamos Flexbox, aún necesitamos estructurar el diseño, aunque debido a las características específicas de Grid, se ve un poco diferente.
Esta es una de las situaciones en las que las personas pueden argumentar que Grid es más complicado, pero de hecho, solo dibujo bloques alrededor de cada contenido.
Usando Flexbox, creamos dos bloques que se destacaban como columnas. Cuando usamos la cuadrícula, en su lugar, configuramos la cuadrícula completa para el elemento primario y luego le indicamos a los elementos secundarios dónde sentarse en esta cuadrícula.
Para configurar la cuadrícula, podemos hacer algo como esto:
.card { display: grid; grid-template-columns: 1fr 3fr; }
La unidad de medida fr es exclusiva de la cuadrícula e indica la proporción de espacio disponible. Este uso es muy similar a instalar dos columnas en Flexbox y determinar sus anchos de 25% y 75%, respectivamente.
Colocar elementos en una cuadrícula
Quizás debido al hecho de que durante muchos años usé float para crear marcas, ahora las situaciones en las que los elementos se ubican exactamente donde se necesitan parecen poca magia.
Podrías usar
grid-row y
grid-column para cada elemento para colocarlos exactamente donde queramos, pero cuanto más uso Grid, más me enamoro de la propiedad
grid-template-areas y coloco elementos usando definiciones de área.
Este enfoque lleva un poco más de tiempo, pero vale la pena, especialmente cuando creamos un diseño adaptativo (llegaremos a esto pronto).
Primero necesitamos definir
grid-template-areas de
grid-template-areas para el elemento
.card , después de lo cual podemos asignar todos los elementos secundarios a estas áreas:
.card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; }
En el siguiente ejemplo, puede ver todo esto en acción:
Así de simple
Una de las razones por las que me gusta usar
grid-template-areas es que si alguien más mira el código, inmediatamente comprenderá lo que está sucediendo ...
Si alguien le muestra el código en el que se especifican la
grid-row grid-column utilizando números y
span , es bastante simple calcular y comprender dónde y cómo se ubicarán los elementos. Para diseños simples o para usar span en algunos lugares, considero que su uso es apropiado,
pero mucho más agradable, solo mirando el código del elemento padre, entiendo de inmediato cómo se verá todo el diseño .
Cuando se usa una cuadrícula, es más fácil saber el tamaño real del elemento.
En nuestro primer ejemplo, donde establecemos el ancho de uno de los elementos flexibles = 50%, de hecho, no era igual al 50%. Si entiendes por qué sucedió esto, genial, pero a veces puede ser molesto. Esto es bastante fácil de solucionar, pero cuando se usa una cuadrícula, se convierte en un problema mucho más pequeño.
Como definimos todo el diseño, también especificamos exactamente cuánto espacio deben ocupar los elementos.
Y, por supuesto, tenemos a nuestra disposición la función
minmax() y las unidades de medida
fr , que agitan un poco el agua, ya que nos permiten definir tamaños con mayor flexibilidad (como los que usamos en el ejemplo anterior), pero aún así todavía tenemos un control total sobre su flexibilidad, y todo esto es controlado por el padre, sin la necesidad de establecer algunas propiedades para el padre y otras para los hijos.
Cambios limitados
Si miramos el ejemplo de Flexbox, no podemos hacer que se vea como el diseño a continuación sin cambiar el marcado HTML:
Nos restringimos a cómo agrupamos elementos usando un
<div> . Tuvimos que usar estos
<div> para que el diseño funcionara, pero ahora se ha convertido en un obstáculo para nosotros.
Con los hijos de nuestro contenedor de rejilla ubicados en el mismo nivel, puede hacer todo . Y como una ventaja adicional, ya que configuramos todo usando
grid-template-areas , hacer estos cambios es muy fácil.
.card { grid-template-areas: "image name" "image position" "image social" ". description"; }
Al jugar con
grid-template-areas esta manera, puede cambiar rápida y fácilmente los íconos de las redes sociales a donde queremos verlos (el punto en la última parte indica una celda vacía).
Hace la vida más fácil cuando se trabaja con consultas de medios.
Como mencioné varias veces, este es el caso cuando
grid-template-areas justifica el uso de
grid-template-areas . Podemos controlar completamente nuestro diseño solo usando las propiedades del padre:
.card { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } }
CodePen a continuación contiene un ejemplo completamente diseñado. Puedes estudiarlo, jugar con áreas de cuadrícula y ver lo fácil que es reconstruir completamente el diseño.
Flexbox todavía tiene su propio alcance
Uso Grid cada vez más, pero creo que Flexbox todavía tiene su propio alcance. Si tengo un logotipo y una navegación ubicados uno al lado del otro, sería bueno tener una manera fácil de hacer algo como esto y saber que estarán donde yo quiero que estén:
.header { display: flex; justify-content: space-between; }
Lo mismo se aplica a la
<ul> que usamos para la navegación, solo para que los elementos se sigan entre sí o, como puede ver en el ejemplo con la tarjeta que examinamos, es ideal para
.social-list .
Para componentes simples donde no necesitamos un diseño complicado, esto realmente funciona bien. Pero cada vez más, noto un movimiento hacia Grid, a veces debido a la necesidad obvia de ellos, a veces porque quiero usar la función
minmax() o las unidades de medida
fr .
Pero al final, creo que lo mejor de Grid es la capacidad de simplificar enormemente nuestro marcado.
Todavía nos vemos obligados a usar
<div> , pero gracias a Grid, podemos usarlos cada vez menos.
En conclusión
No importa cuán bueno sea Flexbox, no es más simple que Grid. Realmente funciona muy bien en ciertas situaciones, pero cuando se trabaja con diseños más complejos, Grid nos permite tener mucho más control. Este control se mejora al trabajar con un diseño receptivo al realizar cambios en las consultas de medios.
Al usar Flexbox, lo mejor que podemos cambiar es la
flex-direction . Usando una cuadrícula, podemos cambiar rápida y simplemente por completo el diseño de un componente.
Tanto Flexbox como Grid tienen muchas más funciones. Cada uno tiene su propósito, pero si siente que no sabe qué enfoque tomar, o está atascado tratando de comprender el diseño receptivo en general, recientemente anuncié un curso en Scrimba que se enfoca en el diseño receptivo llamado The Responsive Web Design Bootcamp.