CSS Grid en IE: ¡ahora se admitirán nombres de áreas duplicadas!

Autoprefixer ahora está en la versión 9.3.1 y ha habido muchas actualizaciones desde que escribió el CSS Grid original de tres partes en la serie IE; La actualización más importante es el nuevo sistema de áreas de cuadrícula. Esto se debe principalmente a Bogdan Dolin, quien ha estado trabajando como loco para solucionar muchos problemas de Autoprefixer. Las traducciones de cuadrícula de Autoprefixer eran poderosas antes, ¡pero ahora se han vuelto mucho más poderosas!

Serie de artículos:

1. Desmentir conceptos erróneos comunes sobre IE Grid
2. CSS Grid y el nuevo Autoprefixer
3. Simular una cuadrícula de colocación automática con espacios
4. ¡Ahora se admitirán nombres de áreas duplicadas! (Esta publicación)

Cómo admitir nombres de áreas duplicadas con autoprefijo

En la Parte 2 de la serie, señaló por qué Autoprefixer no podía manejar nombres de áreas duplicadas que se usaban en múltiples selectores.

Para resumir, este es el ejemplo que dice en el artículo:

Duplicate area names were supported - n = no side-bars - f = first sidebar only - s = second sidebar only - fs = first and second sidebars*/.main-area { display: grid; grid-template: "content-n" / 1fr;}.main-area.has-first-sidebar { grid-template: "first-sb-f content-f" / 300px 1fr;}.main-area.has-second-sidebar { grid-template: "content-s second-sb-s" / 1fr 300px;}.main-area.has-first-sidebar.has-second-sidebar { grid-template: "first-sb-fs content-fs second-sb-fs" / 200px 1fr 200px;}.main-area gt; .content { grid-area: content-n; /* no side-bars */}.main-area gt; .sidebar.first { grid-area: first-sb-f; /* first sidebar only */}.main-area gt; .sidebar.second { grid-area: second-sb-s; /* second sidebar only */}.main-area.has-first-sidebar gt; .content { grid-area: content-f; /* first sidebar only */}.main-area.has-second-sidebar gt; .content { grid-area: content-s; /* second sidebar only */}.main-area.has-first-sidebar.has-second-sidebar gt; .content { grid-area: content-fs; /* first and second sidebars */}.main-area.has-first-sidebar.has-second-sidebar gt; .sidebar.first { grid-area: first-sb-fs; /* first and second sidebars */}.main-area.has-first-sidebar.has-second-sidebar gt; .sidebar.second { grid-area: second-sb-fs; /* first and second sidebars */}

¡Ah, sí, y no te olvides de las consultas de los medios!

Ese ejemplo se basó en el código real que tuve que escribir para un proyecto real… así que sí, realmente quería obtener soporte para nombres de área duplicados en Autoprefixer.

Ahora que tenemos soporte para nombres de áreas duplicadas, podemos simplificar ese código a algo mucho mejor.

/*  Duplicate area names now supported!  This code will work perfectly in IE with Autoprefixer 9.3.1*/.main-area {  display: grid;  grid-template:    "content" /      1fr;}.main-area.has-first-sidebar {  grid-template:    "first-sb content" /      300px    1fr;}.main-area.has-second-sidebar {  grid-template:    "content second-sb" /      1fr     300px;}.main-area.has-first-sidebar.has-second-sidebar {  grid-template:    "first-sb content second-sb" /      200px    1fr     200px;}.content {  grid-area: content;}.sidebar.first {  grid-area: first-sb;}.sidebar.second {  grid-area: second-sb;}

.main-area {  display: -ms-grid;  display: grid;  -ms-grid-rows: auto;  -ms-grid-columns: 1fr;  grid-template:    "content" /      1fr;}.main-area.has-first-sidebar {  -ms-grid-rows: auto;  -ms-grid-columns: 300px 1fr;  grid-template:    "first-sb content" /      300px    1fr;}.main-area.has-second-sidebar {  -ms-grid-rows: auto;  -ms-grid-columns: 1fr 300px;  grid-template:    "content second-sb" /      1fr     300px;}.main-area.has-first-sidebar.has-second-sidebar {  -ms-grid-rows: auto;  -ms-grid-columns: 200px 1fr 200px;  grid-template:    "first-sb content second-sb" /      200px    1fr     200px;}.content {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: content;}.main-area.has-first-sidebar gt; .content {  -ms-grid-row: 1;  -ms-grid-column: 2;}.main-area.has-second-sidebar gt; .content {  -ms-grid-row: 1;  -ms-grid-column: 1;}.main-area.has-first-sidebar.has-second-sidebar gt; .content {  -ms-grid-row: 1;  -ms-grid-column: 2;}.sidebar.first {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: first-sb;}.main-area.has-first-sidebar.has-second-sidebar gt; .sidebar.first {  -ms-grid-row: 1;  -ms-grid-column: 1;}.sidebar.second {  -ms-grid-row: 1;  -ms-grid-column: 2;  grid-area: second-sb;}.main-area.has-first-sidebar.has-second-sidebar gt; .sidebar.second {  -ms-grid-row: 1;  -ms-grid-column: 3;}

Con ese CSS, ahora podemos usar las clases has-first-sidebary has-second-sidebaren el elemento de cuadrícula para modificar qué plantilla de cuadrícula usa el navegador. Ya no tenemos que preocuparnos por definir exactamente en qué se colocan las celdas de la cuadrícula.

Asignar nombres de áreas reutilizables a los componentes

Una de las limitaciones del verso obligado a utilizar nombres de área única era que a los componentes no se les podía dar un nombre de área único y consistente reutilizable. Nos obligamos a crear nombres de área únicos para cada cuadrícula.

Ahora que Autoprefixer admite nombres de área duplicados, esa limitación desapareció. Podemos proporcionar a cada componente un nombre de área único basado en el nombre de su componente. Luego podemos hacer referencia a ese nombre de área siempre que queramos colocar ese componente dentro de un diseño de cuadrícula.

/* header.scss */.header {  grid-area: header;}/* nav.scss */.nav {  grid-area: nav;}/* sidebar.scss */.sidebar {  grid-area: sidebar;}/* content.scss */.content {  grid-area: content;}/* subscribe.scss */.subscribe {  grid-area: subscribe;}/* footer.scss */.footer {  grid-area: footer;}/* layout.scss */.single-sidebar-layout {  display: grid;  grid-template-areas:    "header    header"    "nav       content"    "subscribe content"    "footer    footer";}.double-sidebar-layout {  display: grid;  grid-template-areas:    "header header    header"    "nav    content   sidebar"    "nav    subscribe sidebar"    "footer footer    footer";}

/* header.scss */.header {  -ms-grid-row: 1;  -ms-grid-column: 1;  -ms-grid-column-span: 2;  grid-area: header;}.double-sidebar-layout gt; .header {  -ms-grid-row: 1;  -ms-grid-column: 1;  -ms-grid-column-span: 3;}/* nav.scss */.nav {  -ms-grid-row: 2;  -ms-grid-column: 1;  grid-area: nav;}.double-sidebar-layout gt; .nav {  -ms-grid-row: 2;  -ms-grid-row-span: 2;  -ms-grid-column: 1;}/* sidebar.scss */.sidebar {  -ms-grid-row: 2;  -ms-grid-row-span: 2;  -ms-grid-column: 3;  grid-area: sidebar;}/* content.scss */.content {  -ms-grid-row: 2;  -ms-grid-row-span: 2;  -ms-grid-column: 2;  grid-area: content;}.double-sidebar-layout gt; .content {  -ms-grid-row: 2;  -ms-grid-column: 2;}/* subscribe.scss */.subscribe {  -ms-grid-row: 3;  -ms-grid-column: 1;  grid-area: subscribe;}.double-sidebar-layout gt; .subscribe {  -ms-grid-row: 3;  -ms-grid-column: 2;}/* footer.scss */.footer {  -ms-grid-row: 4;  -ms-grid-column: 1;  -ms-grid-column-span: 2;  grid-area: footer;}.double-sidebar-layout gt; .footer {  -ms-grid-row: 4;  -ms-grid-column: 1;  -ms-grid-column-span: 3;}/* layout.scss */.single-sidebar-layout {  display: -ms-grid;  display: grid;  grid-template-areas:    "header    header"    "nav       content"    "subscribe content"    "footer    footer";}.double-sidebar-layout {  display: -ms-grid;  display: grid;  grid-template-areas:    "header header    header"    "nav    content   sidebar"    "nav    subscribe sidebar"    "footer footer    footer";}

Esto es lo que tenemos. Tenga en cuenta que esto debe verse en IE.

Limitación de nombres de áreas duplicadas

Hay un caso de uso bastante común que Autoprefixer todavía no puede manejar en este momento. Cuando el selector principal de la celda de la cuadrícula no coincide con el selector de plantilla de cuadrícula, intenta resolver un nombre de área duplicado:

.grand-parent .mother {  grid-template-areas: "child";}.grand-parent .father {  grid-template-areas: "child child";}/* This will work */.grand-parent .mother .child {  grid-area: child;}/*  This does not work because:  - ".uncle" != ".grand-parent .mother"  - ".uncle" != ".grand-parent .father"  - "child" is a duplicate area name*/.uncle .child {  grid-area: child;}

Aquí hay un escenario más realista de la limitación actual en el algoritmo de Autoprefixer:

.component .grid {  display: grid;  grid-template-areas:  "one two";  grid-template-columns: 1fr 1fr;}/* This rule triggers duplicate area name conflicts. */.component.modifier .grid {  grid-template-areas:  "one ... two";  grid-template-columns: 1fr 1fr 1fr;}/*  This does not work because:  - ".component" != ".component .grid"  - ".component" != ".component.modifier .grid"  - area names "one" and "two" both have duplicate area name conflicts*/.component .cell-one {  grid-area: one;}.component .cell-two {  grid-area: two;}

En realidad, por el momento sólo hay tres maneras de resolver este conflicto.

Opción 1: eliminar el selector principal de elementos secundarios

Sin ninguna protección para aplicar estilos a un componente en particular, esta es, con diferencia, la forma más peligrosa de resolver el problema. No lo recomiendo.

.component .grid {  display: grid;  grid-template-areas:  "one two";  grid-template-columns: 1fr 1fr;}.component.modifier .grid {  grid-template-areas:  "one ... two";  grid-template-columns: 1fr 1fr 1fr;}.cell-one {  grid-area: one;}.cell-two {  grid-area: two;}

.component .grid {  display: -ms-grid;  display: grid;  grid-template-areas:  "one two";  -ms-grid-columns: 1fr 1fr;  grid-template-columns: 1fr 1fr;}.component.modifier .grid {  grid-template-areas:  "one ... two";  -ms-grid-columns: 1fr 1fr 1fr;  grid-template-columns: 1fr 1fr 1fr;}.cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: one;}.component.modifier .grid gt; .cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;}.cell-two {  -ms-grid-row: 1;  -ms-grid-column: 2;  grid-area: two;}.component.modifier .grid gt; .cell-two {  -ms-grid-row: 1;  -ms-grid-column: 3;}

Opción 2: volver a utilizar nombres de área única

Esta solución es bastante fea, pero si no tienes control sobre el HTML, entonces probablemente esta sea la mejor manera de solucionar el problema.

.component .grid {  display: grid;  grid-template-areas:  "one two";  grid-template-columns: 1fr 1fr;}.component .cell-one {  grid-area: one;}.component .cell-two {  grid-area: two;}.component.modifier .grid {  grid-template-areas:  "modifier_one ... modifier_two";  grid-template-columns: 1fr 1fr 1fr;}.component.modifier .cell-one {  grid-area: modifier_one;}.component.modifier .cell-two {  grid-area: modifier_two;}

.component .grid {  display: -ms-grid;  display: grid;  grid-template-areas:  "one two";  -ms-grid-columns: 1fr 1fr;  grid-template-columns: 1fr 1fr;}.component .cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: one;}.component .cell-two {  -ms-grid-row: 1;  -ms-grid-column: 2;  grid-area: two;}.component.modifier .grid {  grid-template-areas:  "modifier_one ... modifier_two";  -ms-grid-columns: 1fr 1fr 1fr;  grid-template-columns: 1fr 1fr 1fr;}.component.modifier .cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: modifier_one;}.component.modifier .cell-two {  -ms-grid-row: 1;  -ms-grid-column: 3;  grid-area: modifier_two;}

Opción 3: utilizar una convención de nomenclatura estilo BEM

Sí, si usas la convención de nomenclatura BEM (o algo similar), esto prácticamente nunca será un problema para ti. Esta es fácilmente la forma preferida de abordar el problema si es una opción.

.component__grid {  display: grid;  grid-template-areas:  "one two";  grid-template-columns: 1fr 1fr;}.component__grid--modifier {  grid-template-areas:  "one ... two";  grid-template-columns: 1fr 1fr 1fr;}.component__cell-one {  grid-area: one;}.component__cell-two {  grid-area: two;}

.component__grid {  display: -ms-grid;  display: grid;  grid-template-areas:  "one two";  -ms-grid-columns: 1fr 1fr;  grid-template-columns: 1fr 1fr;}.component__grid--modifier {  grid-template-areas:  "one ... two";  -ms-grid-columns: 1fr 1fr 1fr;  grid-template-columns: 1fr 1fr 1fr;}.component__cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: one;}.component__grid--modifier gt; .component__cell-one {  -ms-grid-row: 1;  -ms-grid-column: 1;}.component__cell-two {  -ms-grid-row: 1;  -ms-grid-column: 2;  grid-area: two;}.component__grid--modifier gt; .component__cell-two {  -ms-grid-row: 1;  -ms-grid-column: 3;}

Tengo algunos problemas con BEM, pero con algunos ajustes en la sintaxis, puede ser una forma realmente excelente de controlar la especificidad y el alcance de CSS.

Otras actualizaciones de Autoprefixer

Mientras estoy aquí, les daré una actualización sobre un par de otros desarrollos que han ocurrido en Autoprefixer desde que escribí la serie CSS Grid original en IE.

Sin embargo, antes de profundizar, aquí se explica cómo configurar las cosas en CodePen en caso de que desee seguir sus propios experimentos.

Uso de traducciones de Autoprefixer Grid en CodePen

CodePen ya se actualizó a la versión 9.3.1 de Autoprefixer. Ahora podrás integrar fácilmente estilos CSS Grid compatibles con IE en tus bolígrafos. Primero, asegúrese de que Autoprefixer esté habilitado en la configuración de CodePen (Configuración CSS [Prefijo de proveedor] Autoprefixer).

Luego agregue el /* autoprefixer grid: on */comentario de control completamente nuevo en la parte superior del Panel CSS. Profundizaré un poco más en esta increíble nueva característica más adelante.

Actualización: CodePen ahora también admite el /* autoprefixer grid: autoplace */comentario de control más nuevo. Esto significa que ahora puedes utilizar CodePen para experimentar con la funcionalidad de colocación automática de Autoprefixers.

Ahora puedes escribir código CSS Grid moderno compatible con IE y CodePen agregará automáticamente todos los prefijos de IE por usted.

Sin embargo, para poder probar sus bolígrafos en IE, deberá ver el bolígrafo en “Modo de depuración” (Cambiar vista del modo de depuración). Será necesario guardar el lápiz antes de tener acceso a esta vista.

Si desea probar una herramienta que le muestre la salida de Autoprefixer en tiempo real, pruebe la herramienta en línea solo para eso. Ingrese CSS a la izquierda. Mostrará el CSS traducido de Autoprefixer a la derecha a la medida que escribe.

Nuevos comentarios de control de prefijo automático

No siempre tenemos la capacidad de modificar los ajustes de configuración de Autoprefixer. Si alguna vez ha intentado realizar algunos experimentos de CSS Grid compatibles con IE en CodePen, sabrá el dolor de no tener acceso directo a la configuración de Autoprefixer. También existen algunos marcos como Create React App y Angular que no permiten a los usuarios modificar la configuración de Autoprefixer. También hubo una pequeña barrera de habilidades que impidió que algunos usuarios usaran Grid porque no estaban seguros de cómo habilitar las traducciones de Grid.

Esta limitación estaba causando molestias a muchos usuarios, pero luego Andrey Alexandrov envió una solicitud de extracción que introdujo un nuevo comentario de control. Este nuevo comentario de control brindó a los usuarios la capacidad de activar y desactivar fácilmente las traducciones de la cuadrícula desde el interior del archivo CSS. Esto fue mucho más fácil que hacerlo a través de los ajustes de configuración. También era accesible para todos los usuarios sin importar cómo compilaran su CSS.

Agregará /* autoprefixer grid: autoplace */habilitará las traducciones de cuadrícula para ese bloque completo, mientras que /* autoprefixer grid: off */deshabilitará las traducciones de cuadrícula para ese bloque. Sólo se aplicará el primer comentario de control de cuadrícula de un bloque.

/* Globally enable grid prefixes *//* autoprefixer grid: autoplace */.grid {  display: grid;}.non-ie .grid {  /* Turn off grid prefixes but only for this block */  /* autoprefixer grid: off */  display: grid;  /*    Grid control comments affect the whole block.    This control comment is ignored  */  /* autoprefixer grid: autoplace */  grid-column: 1;}

El código anterior se traduce al siguiente (filtró los comentarios explicativos):

/* autoprefixer grid: autoplace */.grid {  display: -ms-grid;  display: grid;}.non-ie .grid {  /* autoprefixer grid: off */  display: grid;  /* autoprefixer grid: autoplace */  grid-column: 1;}

@supports puede desactivar las traducciones de la cuadrícula

Los nuevos comentarios de control no son la única forma de evitar selectivamente que Autoprefixer muestre el código de traducción de la cuadrícula.

Autoprefixer nunca podrá admitir la colocación automática de cuadrícula implícita. Si utiliza una @supportsdeclaración que verifica algo como grid-auto-rows: 0, Autoprefixer no generará traducciones de cuadrícula para el código ingresado dentro de esa declaración.

.prefixed .grid {  display: -ms-grid;  display: grid;}/* Checking grid-auto-* support prevents prefixes */@supports (grid-auto-rows: 0) {  .modern .grid {    display: grid;  }}/* Checking basic grid support still outputs prefixes */@supports (display: grid) {  .still-prefixed .grid {    display: -ms-grid;    display: grid;  }}

Para admitir IE, Autoprefixer puede generar a veces algo así como 50 líneas de CSS adicionales. Si está escribiendo código Grid dentro de una @supportsdeclaración, querrá que las traducciones de IE estén desactivadas para reducir el peso de su CSS. Si no desea utilizarlo @supports (grid-auto-rows: 0), puede utilizar un comentario de control dentro de la @supportsdeclaración.

@supports (display: grid) {  .prefixed .grid {    display: -ms-grid;    display: grid;  }}@supports (display: grid) {  /* autoprefixer grid: off */  .modern .grid {    display: grid;  }}

El prefijador automático ahora hereda los espacios en la cuadrícula

En la serie de artículos originales, dije que Autoprefixer no podía heredar grid-gapvalores. En la versión 9.1.1, grid-gaplos valores se podían heredar mediante consultas de medios. En la versión 9.3.1, también se pueden heredar a través de selectores más específicos.

.grid {  display: grid;  grid-gap: 20px; /* grid-gap is stated here */  grid-template:    "one two" /    1fr  1fr;}@media (max-width: 600px) {  .grid {    /* grid-gap is now inhereited here */    grid-template:      "one"      "two" /       1fr;  }}.grid.modifier {    /* grid-gap is now inhereited here as well */    grid-template:      "one"      "two" /       1fr;}.one { grid-area: one; }.two { grid-area: two; }

.grid {  display: -ms-grid;  display: grid;  grid-gap: 20px; /* grid-gap is stated here */  -ms-grid-rows: auto;  -ms-grid-columns: 1fr 20px 1fr;      grid-template:    "one two" /    1fr  1fr;}@media (max-width: 600px) {  .grid {    /* grid-gap is now inhereited here */    -ms-grid-rows: auto 20px auto;    -ms-grid-columns: 1fr;        grid-template:      "one"      "two" /       1fr;  }}.grid.modifier {    /* grid-gap is now inherited here as well */    -ms-grid-rows: auto 20px auto;    -ms-grid-columns: 1fr;        grid-template:      "one"      "two" /       1fr;}.one {  -ms-grid-row: 1;  -ms-grid-column: 1;  grid-area: one;}.grid.modifier gt; .one {  -ms-grid-row: 1;  -ms-grid-column: 1;}.two {  -ms-grid-row: 1;  -ms-grid-column: 3;  grid-area: two;}.grid.modifier gt; .two {  -ms-grid-row: 3;  -ms-grid-column: 1;}@media (max-width: 600px) {  .one {    -ms-grid-row: 1;    -ms-grid-column: 1;  }    .two {    -ms-grid-row: 3;    -ms-grid-column: 1;  }}

plantilla de cuadricula: tramo X; ahora trabaja

En la Parte 2 de esta serie, mencioné que la siguiente sintaxis no funciona:

.grid-cell {  grid-column: span 2;}

Esto se solucionó en la versión 9.1.1. Ahora se traduce de la siguiente manera:

.grid-cell {  -ms-grid-column-span: 2;  grid-column: span 2;}

Nueva advertencia sobre la combinación de colocación manual y basada en área

Un usuario se quejó de que Autoprefixer no manejaba correctamente las áreas de la cuadrícula. Tras una mayor investigación, nos dimos cuenta de que estaban aplicando tanto una configuración grid-areacomo una grid-columndentro de la misma regla CSS.

.grid {  display: grid;  grid-template-areas: "a b";}/* This doesn't work very well */.grid-cell {  grid-column: 2;  grid-area: a;}

Úselo grid-area solo o con nosotros grid-column grid-row. Nunca utilices ambos al mismo tiempo.

Si tienes curiosidad, esto es lo que Autoprefixer genera para el código anterior:

.grid {  display: -ms-grid;  display: grid;  grid-template-areas: "a b";}/* This doesn't work very well */.grid-cell {  -ms-grid-row: 1;  -ms-grid-column: 1;  -ms-grid-column: 2;  grid-column: 2;  grid-area: a;}

Hay una excepción a esto. Es posible que necesites una celda de cuadrícula para superponer otras celdas de cuadrícula en tu diseño. Desea utilizarlo grid-template-areaspara colocar las celdas de su cuadrícula debido a que Autoprefixer facilita mucho la ubicación general de las celdas. Sin embargo, realmente no puedes crear superposiciones de celdas usando grid-template-areas. Para crear esta superposición, puede utilizar grid-[column/row]-end: span X;después de la grid-areadeclaración para forzar la superposición.

.grid {  display: grid;  grid-template-areas:    "a . ."    "a b b"    "a . .";  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;}.grid-cell-a {  grid-area: a;  /* place cell span after the grid-area to force an overlap */  grid-column-end: span 2;}

Sin embargo, si ha declarado espacios en la cuadrícula, deberá escribir el prefijo de extensión de columna/fila manualmente teniendo en cuenta las columnas/filas adicionales generadas por Autoprefixer (IE no lo admite grid-gap). Hay un problema para esto en GitHub.

.grid {  display: grid;  grid-template-areas:    "a . ."    "a b c"    "a . .";  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-gap: 10px;}.grid-cell-a {  grid-area: a;  /* IE column span added manually */  -ms-grid-column-span: 3; /* IE spans 2 columns + the gap */  grid-column-end: span 2; /* Modern browsers only span 2 columns */}

Actualmente, esta técnica genera un mensaje de advertencia en Autoprefixer que no se puede ocultar fácilmente. Un problema para esto está en GitHub.

Nueva advertencia al usar [align/justify/place]-[content/items]

Desafortunadamente. IE no tiene la capacidad de alinear las celdas de la cuadrícula desde el contenedor principal. La única forma de alinear las celdas de la cuadrícula en IE es utilizando las propiedades -ms-grid-row-aligny -ms-grid-column-align. Estos se traducen a align-selfy justify-selfen la sintaxis de la cuadrícula moderna.

Las siguientes propiedades activarán una advertencia en Autoprefixer si se usan junto con una propiedad CSS Grid:

• align-items
• align-content
• justify-items
• justify-content
• place-items
• place-content

Las propiedades align-contentson prácticamente imposibles de replicar en IE. Las propiedades , y , por otro lado, son bastante fáciles de replicar usando sus equivalentes enjustify-contentplace-contentalign-itemsjustify-itemsplace-items