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.

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Advertising

Analytics

Other