Esta es la tercera y última parte de una serie de tres sobre el uso seguro de la cuadrícula CSS en Internet Explorer 11 (IE11) sin volverse loco.
En la Parte 1, cubrí algunos de los conceptos erróneos comunes que la gente tiene sobre la implementación de la cuadrícula CSS nativa de IE11. En la Parte 2, le mostré al mundo lo fácil que es escribir código de cuadrícula CSS compatible con IE.
Hoy, me alejaré de la cuadrícula CSS por un momento para mostrarles una técnica de caja flexible que replica la funcionalidad básica de colocación automática de la cuadrícula CSS. Esta réplica de cuadrícula CSS incluso se verá como una grid-gap se le ha aplicado. Sin embargo, necesito ser muy claro: esto no se trata de cómo hacer que la colocación automática de la cuadrícula CSS funcione en IE.
Serie de artículos:
-
Desmontando los conceptos erróneos comunes de IE Grid
-
CSS Grid y el nuevo Autoprefixer
-
Fingir una cuadrícula de colocación automática con espacios (esta publicación)
-
¡Ahora se admiten nombres de áreas duplicados!
Cómo hacer una cuadrícula falsa con huecos de celda
Paso 1: HTML
Usaré este HTML básico como ejemplo:
<div class="grid-wrapper">
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
Paso 2: Dimensionamiento de la caja del borde
Lo primero que debemos hacer en el CSS es asegurarnos de que todos los cuadros tengan un tamaño basado en border-box en vez de content-box. La mejor forma de hacerlo es utilizando el box-sizing: border-box técnica de herencia:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}Eso se aplicará a nivel mundial. Si está trabajando en un proyecto existente que no tiene box-sizing ajustado a border-box, luego cambia html en el fragmento a un selector que apunta al elemento que desea convertir en una cuadrícula.
Paso 3: Flex
A continuación, deberá activar algunas configuraciones de flexbox:
.grid {
/* Forces equal cell heights */
display: flex;
flex-wrap: wrap;
}Paso 4: anchos
Ahora, configure los anchos de sus columnas. Haremos una cuadrícula simple de tres columnas:
.grid-cell {
/* Sets column count */
width: calc(100% / 3); /* calc() method */
width: 33.33%; /* percentage method */
}El calc() El método permite cambiar el ancho de las columnas con un poco más de facilidad. Usted indica cuántas columnas desea y el navegador hace los cálculos por usted. Esto es especialmente útil cuando necesita una mayor cantidad de columnas, como 7 u 8. La compatibilidad del navegador con calc() es fuerte pero no tan fuerte como un valor porcentual sin procesar que ha sido compatible con los navegadores desde los albores de CSS.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 19 * | 4 * | 11 | 12 | 6 * |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 96 | 6.0-6.1 * |
El método de porcentaje tiene un soporte de navegador ligeramente mejor y puede ser un poco más estable en IE. Si no necesita ser compatible con Opera Mini, aún así recomendaría ir con el calc() método primero. Pruebe en IE, y si el diseño se rompe, primero intente usar 99.999% en vez de 100% en la función calc (calc(99.999% / 3)). Si eso no funciona, intente cambiar al método de porcentaje. Estaré usando el calc() método en todos mis ejemplos. Tenga en cuenta que si está utilizando un preprocesador CSS como SCSS, puede obtener lo mejor de ambos mundos si hace que el preprocesador haga los cálculos por usted. Esto tiene el costo de no poder editar o revisar fácilmente los recuentos de columnas en las herramientas de desarrollo del navegador.
/* Set column count using SCSS */
.grid-cell {
width: (100% / 3);
}
/* CSS output into the browser */
.grid-cell {
width: 33.3333333333%;
}Démosle a las celdas de la cuadrícula algo de altura y un interior box-shadow para que podamos ver lo que está pasando. No voy a agregar un borde, lo usaré más tarde. 😉
.grid-cell {
/* So that we can see the grid cells */
box-shadow: inset 0 0 0 1px #000;
height: 100px;
}
.grid-wrapper {
/* Allows us to see the edges of the grid */
box-shadow: 0 0 10px 2px green;
}Ahora debería tener algo parecido a esto:
Una cuadrícula básica de 3 x 2 sin espacios
Eso es aburrido, ¿verdad? Todo el mundo sabe cómo hacer eso. ¿Dónde están estos huecos en la red de los que sigo hablando? Quiero mis huecos !!!
Paso 5: Borde
Aquí es donde llegamos a la parte interesante. Desde que establecimos box-sizing a border-box, el ancho del 33,33% ahora incluye el borde. ¡Lo que esto significa es que podemos comenzar a mezclar de manera segura unidades fijas y basadas en porcentajes! 😃
.grid {
/* Creates an equal outer gap */
padding: 20px 0 0 20px;
}
.grid-cell {
/* Creates gaps */
border: 0 solid transparent;
border-width: 0 20px 20px 0;
}Esto da como resultado algo que parece una cuadrícula con el mismo espaciado en todas partes:
Una cuadrícula de 3 x 2 con el mismo espacio entre cada celda y los bordes exteriores de la cuadrícula
Para ayudarlo a tener una mejor idea de lo que está sucediendo, eche un vistazo a la siguiente imagen:
Diagrama codificado por colores de la cuadrícula
El área azul en los lados superior e izquierdo de la cuadrícula es el relleno para el .grid elemento. Los contornos amarillos muestran el área que cada .grid-cell elemento ocupa. Las áreas rojas en los lados inferior y derecho de cada celda son el borde de cada .grid-cell elemento.
Ese podría ser el look que realmente quieres. Por otro lado, eso no es lo que una cuadrícula con un grid-gap el ajuste parece. Por eso tenemos otro paso.
Paso 6: margen y desbordamiento
Para que la cuadrícula presione con fuerza contra los bordes de su contenedor, necesitamos un poco de ayuda de los márgenes negativos y overflow: hidden:
.grid {
/* Pulls grid cells hard against edges */
margin: -20px;
}
.grid-wrapper {
/* Prevents odd margin behavior */
overflow: hidden;
}Tenemos que aplicar overflow: hidden para evitar que esto suceda:
El margen negativo superior e inferior se ignora si el desbordamiento no está oculto
Aplicando el margen negativo y overflow: hidden nos llevará a esta hermosa recreación de básicos grid-gap funcionalidad:
Una cuadrícula de 3 x 2 que se ve idéntica a una cuadrícula CSS con una configuración de espacio
El relleno superior e izquierdo de la cuadrícula es en realidad opcional. Puede optar por dejar el relleno y cambiar el valor del margen como se muestra a continuación si lo prefiere:
.grid {
/* Margin needs to be this if leaving off the top and left .grid padding */
margin: 0 -20px -20px 0;
}¡Pero espera! El trabajo aún no ha terminado. Eche un vistazo a lo que sucede si agregamos un color de fondo a una de las celdas de la cuadrícula:
Un fondo rosa aplicado a la celda superior izquierda se desborda en el espacio de la cuadrícula
No es exactamente lo que queremos, así que hay un paso más.
Paso 7: clip de fondo
Para evitar que el fondo de la celda de la cuadrícula se filtre en nuestro falso grid-gap, necesitamos agregar background-clip: padding-box lo.
.grid-cell {
/* Prevents background bleed */
background-clip: padding-box;
}Ahora tenemos esto:
¡Se ha corregido el sangrado de fondo!
Si nunca ha oído hablar del background-clip propiedad antes, es posible que le preocupe la compatibilidad con el navegador … bueno, no lo esté. background-clip ha existido desde IE9!
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 15 | 4 | 9 | 12 | 7 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 4.4 | 7.0-7.1 |
Paso 8: Consultas de medios
La mayoría de las veces, las cuadrículas deben poder cambiar la cantidad de columnas que tienen a medida que crecen y se encogen. Usar otros métodos puede ser un dolor enorme. Es posible que tenga que calcular un grupo de enésimos niños para poder eliminar el margen derecho o lo que sea. ¡Con este método, solo tiene que cambiar un valor! 😃
.grid-cell {
/* Sets the default column count */
width: calc(100% / 1); /* 1 column */
}
@media (min-width: 400px){
.grid-cell {
width: calc(100% / 2); /* 2 columns */
}
}
@media (min-width: 600px){
.grid-cell {
width: calc(100% / 3); /* 3 columns */
}
}
Rejilla 3 x 2 con huecos
Rejilla 2 x 3 con huecos
1 x 6 rejilla con huecos
Así es como se ve cuando lo juntamos todo:
Vea la cuadrícula de Pen Fake de Daniel Tonon (@ daniel-tonon) en CodePen.
¡Nadie tiene tiempo para eso!
¡Eso es mucho trabajo en comparación con lo que Grid moderno puede hacer con solo tres líneas de CSS! Para facilitar la tarea, creé un mixin impulsado por SCSS que llamo Gutter Grid. Una vez que Gutter Grid está instalado en el proyecto, puede crear rápidamente una cuadrícula de tres columnas con espacios de 20px usando el siguiente código SCSS:
.grid-wrapper {
overflow: hidden; /* Need this for the chrome bug */
}
.grid {
@include grid($cols: 3, $gutter: 20px);
}Puede escribirlo aún más corto de esta manera si le parece demasiado detallado:
.grid-wrapper {
overflow: hidden;
}
.grid {
@include grid(3, 20px);
}Gutter Grid viene preconstruido con algunos conjuntos de puntos de interrupción, por lo que es posible que no tenga que escribir ningún punto de interrupción si su cuadrícula abarca toda la página. Sin embargo, si necesita puntos de interrupción personalizados, Gutter Grid le permite personalizarlos fácilmente así:
// Verbose custom breakpoints
@include grid($cols: 7, $gutter: 20px, $breakpoints: (
4 : 960px, // At 960px or below, there will be 4 columns
2 : (max, 600px), // You can use mq-scss syntax here as well
1 : 480px,
));
// Short version
@include grid(7, 20px, (
4 : 960px,
2 : 600px,
1 : 480px,
));Como habrás notado en el ejemplo, Gutter Grid también admite la misma sintaxis de consulta de medios que usa esta cosa llamada mq-scss. Si se está preguntando qué es eso, bueno, es un mixin Sass que creé que hace que escribir y administrar consultas de medios sea un millón de veces más fácil. El uso de declaraciones mq-scss para dictar el recuento de columnas permite un control muy preciso sobre cuándo cambia el recuento de columnas.
Agregar sombras a las celdas de la cuadrícula
Como ahora estamos trabajando con sombras, quitaré la sombra del cuadro de la imagen de ejemplo. Nuestra parrilla de salida se ve así ahora:
Una cuadrícula básica de 3 x 2 con espacios y un borde verde alrededor del exterior
Si intentamos agregar un exterior box-shadow a cada celda de la cuadrícula en este momento … bueno, no se ve tan bien:
Agregar sombras a las celdas de la cuadrícula hace que las sombras estén desalineadas
Arreglemos eso.
Paso 1: HTML nuevo
Para crear sombras agradables, necesitamos agregar un div extra dentro de cada celda de la cuadrícula. Realmente no puedes usar ::before o ::after para esto, ya que no pueden contener contenido HTML dentro de ellos.
<div class="grid-wrapper">
<div class="grid">
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
<div class="grid-cell">
<div class="grid-cell-inner"></div>
</div>
</div>
</div>
Paso 2: Flexiona
Ahora, necesitamos hacer que cada celda de la cuadrícula sea un contenedor flexible. Esto permitirá que la parte interior de la celda de la cuadrícula ocupe la altura completa de su padre. También necesitaremos establecer el elemento interno en un ancho del 100%. Esto asegura que tomará todas las dimensiones de su padre, tanto horizontal como verticalmente:
.grid-cell {
/* Forces inner to take up full grid cell height */
display: flex;
}
.grid-cell-inner {
/* Forces inner to take up full grid cell width */
width: 100%;
}Veamos qué obtenemos si intentamos agregar sombras de cuadro a los elementos internos:
.grid-cell-inner {
box-shadow: 0 0 10px 3px blue;
}
Aparecen sombras de cuadro alrededor de las celdas de la cuadrícula, pero se cortan
Eso es mucho mejor, pero todavía no ha terminado. El desbordamiento oculto que estamos usando para evitar el error de Chrome se interpone en el camino.
Paso 3: acolchado Hacky
Por lo tanto, debemos permitir el desbordamiento pero aún evitar este comportamiento de margen extraño. La única otra forma segura que he encontrado de hacerlo es con relleno. Al agregar 1 px de relleno en la parte superior e inferior del elemento de envoltura de la cuadrícula exterior, se solucionará el error de Chrome.
.grid-wrapper {
/* Prevents odd margin behaviour in Chrome */
padding: 1px 0;
}Esto se produce a expensas de tener un espacio adicional de 1 px en la parte superior e inferior de la cuadrícula. La imagen de abajo demuestra cómo se ve esto. Las sombras se han aclarado para mostrar el espacio de 1 px con mayor claridad.
1 px de relleno en la parte superior e inferior de la cuadrícula
Nota: Puede evitar el 1px de relleno superior optando por no incluir el valor del espacio de relleno superior en el elemento de cuadrícula. Sin embargo, no se puede evitar el acolchado inferior de 1 px.
Un ancho de borde aplicado a la envoltura de la cuadrícula exterior también funcionará, por lo que técnicamente no necesité aplicar el relleno al ejemplo anterior. La mayoría de las veces, si aplicamos una sombra a las celdas de la cuadrícula, probablemente no queramos ver un borde envuelto alrededor de ellas. El ejemplo anterior demostró más qué tan pequeño es el relleno.
Actualizar: Puede evitar por completo el comportamiento extraño de los márgenes utilizando un relleno de 0,1 px en lugar de 1 px. Esto se redondeará a 0px en el navegador, pero aún evitará que ocurra el comportamiento de margen extraño. Esto significa que los bordes de la cuadrícula pueden asentarse con fuerza contra los bordes de su contenedor y, al mismo tiempo, permitir que el contenido de desbordamiento sea visible. ¡Gracias a Lu Nelson por su sugerencia en los comentarios! 😁
Así es como se ve la cuadrícula sin el borde exterior:
Cuadrícula de celda de sombra 3 x 2
Cuadrícula de celda de sombra 2 x 3
Cuadrícula de celda de sombra de 1 x 6
Aquí hay un bolígrafo que muestra el producto final:
Vea la cuadrícula Pen Fake con sombras de Daniel Tonon (@ daniel-tonon) en CodePen.
Sombras de la cuadrícula de canal
Veamos cómo agregar sombras en las celdas de la cuadrícula de canal. Puede usar la misma estructura HTML que usamos en el ejemplo anterior.
Ahora, aplique este SCSS para crear una cuadrícula de tres columnas que tenga un canalón de 20px:
.grid {
@include grid(3, 20px, $inners: true);
}Esta nueva $inners: true La propiedad le dice a Gutter Grid que cada una de las celdas de la cuadrícula tiene un único elemento secundario que debe ocupar la altura y el ancho completos de la celda de la cuadrícula principal.
En lugar de usar overflow: hidden, use 0.1px de relleno inferior en el elemento de envoltura (actualizado según la sugerencia de Lu Nelson).
.grid-wrapper {
padding-bottom: 0.1px;
}Gutter Grid no generará un canalón exterior superior si no es necesario. Esto ayuda a evitar problemas relacionados con la peculiaridad del margen negativo. Después de todo, si no hay una canaleta exterior superior para negar con un margen negativo defectuoso, entonces no hay ningún error de qué preocuparse. Sin embargo, la canaleta exterior inferior sigue siendo un problema, y es por eso que necesitamos los 0.1px de relleno inferior. Este 0.1px de relleno inferior se redondea hacia abajo a 0px en el navegador sin dejar de corregir la peculiaridad del margen que no conduce a ningún espacio en la parte inferior de la cuadrícula.
¡Ahora, agregue sus sombras y obtendrá una cuadrícula de canal con celdas de sombra!
.grid-cell-inner {
box-shadow: 0 0 10px 3px blue;
}
Cuadrícula de celda de sombra 3 x 2
Solo he raspado la superficie de lo que Gutter Grid puede hacer en este artículo. Asegúrese de leer la documentación completa para saber de qué más es capaz.
Llegamos al final de nuestra aventura IE grid
Espero que hayas disfrutado de esta incursión en el mundo de IE y CSS grid. Asegúrese de leer la Parte 1 y la Parte 2 si aún no lo ha hecho. Después de leer los tres artículos, ahora estará completamente equipado para hacer algunos diseños realmente impresionantes que se ven tan bien en IE como en los navegadores modernos.
Si alguna vez ve a alguien quejándose de no poder usar la cuadrícula CSS debido a IE, ya sabe qué hacer. Juguetonamente, golpéelos en la cabeza por ser tan tontos y envíelos aquí para obtener la verdad.
¡Ahora, amigos míos, vayan y construyan algunas rejillas! 😃🎉
Serie de artículos:
-
Desmontando los conceptos erróneos comunes de IE Grid
-
CSS Grid y el nuevo Autoprefixer
-
Fingir una cuadrícula de colocación automática con espacios (esta publicación)
-
¡Ahora se admiten nombres de áreas duplicados!