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 */
}