Mixins SCSS para Grid con IE11

Mixins SCSS para Grid con IE11

En mi trabajo debo tener en cuenta a IE11 al desarrollar y si quiero usar Grid CSS me encuentro con la testarudez del finado navegador.
IE11 no quiere entender muchas cosas, entre ellas algo tan genial como las grid-areas así que tengo que ubicar cada elemento del grid en sus coordenadas y además tener en cuenta los prefixes necesarios.

Por eso me hice estos 2 mixins que me facilitan el trabajo:


@mixin prefix_grid($columns, $rows) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: $columns;
    grid-template-columns: $columns;
    -ms-grid-rows: $rows;
    grid-template-rows: $rows;
}

@mixin prefix_grid_item($column, $row, $column_span: 1, $row_span: 1) {
    -ms-grid-column: $column;
    -ms-grid-column-span: $column_span;
    @if $column_span != 1 {
        grid-column: $column / span $column_span;
    } @else {
        grid-column: $column;
    }
    -ms-grid-row: $row;
    -ms-grid-row-span: $row_span;
    @if $row_span != 1 {
        grid-row: $row / span $row_span;
    } @else {
        grid-row: $row;

    }
}

Usarlos es muy fácil, con prefix_grid defino el elemento como grid y le doy los valores para columnas y filas.

.contenedor_grid {
    @include prefix_grid(80px 1fr 30px, auto auto);
}

Con prefix_grid_item ubico el elemento hijo dentro del grid diciéndole en qué columna (primer parámetro) y en qué fila (segundo parámetro) va.
Como tercer parámetro (opcional) le puedo decir si tiene que ocupar más columnas (span) y como cuarto parámetro (opcional) si tiene que ocupar más filas(span).

.elemento_grid {
    @include prefix_grid_item(1, 1); /* En la columna 1 y fila 1 */
}
.elemento_grid--1 {
    @include prefix_grid_item(1, 2); /* En la columna 1 y fila 2 */
}
.elemento_grid--2 {
    @include prefix_grid_item(2, 1, 1, 2); /* Columna 2, fila 1 y se expande a 2 filas */
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.