subgrid

# Visualize one training batch
for images, labels in train_data_loader:
    fig, ax = plt.subplots(figsize = (10, 10))
    ax.set_xticks([])
    ax.set_yticks([])
    ax.imshow(make_grid(images, 4).permute(1,2,0))
    break

.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}

la unidad 1fr en css grid tiene un comportamiento maximo 
yaque si solo se lo pones a un elemento sera el maximo y si le pones a 3
sera 1/3 que es el maximo; por eso no puede ir en el minimo de minmax(30%, 1fr) eso es lo correcto.

__NOTA__
minmax(min,max):es solo de grid y en su parte min no se le pone 1fr porque tiene comportamiento max
-min(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
-max(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)

Ya sabemos que transition no tiene "animación" porque no tiene intervalo de acción
-- esto condiciona a que todas la propiedades existen despues de que el elemento aparesca
-- si le ponemos transition: color 3s; no surgira la animación porque en el display none
   aun no exite el color, luego , en el display block ya existe y no se da la niamción por que
   no logra tener un intervalo donde cambia su valor, sino que no existe y luego exite
   (sinintervalo)

$columns: 1 !default;
2
$gap: 1rem !default;

$enable-cssgrid: true !default;

$enable-offset-grid: false !default;

// Grid breakpoints

//

// Define the maximum dimensions at which your layout will change,

// adapting to different screen sizes, for use in media queries.

$breakpoints: (

  xs: 0px,

  sm: 480px,

  md: 960px,

  lg: 1280px,

  xl: 1440px

) !default;

​

// Grid widths

$grid-widths: (

  sm: 640px,

  md: 1024px,

/*

||||||||||||||||

|||||GRIDER|||||

||||||||||||||||

@github https://github.com/codeforms/Grider

*/

​

/******************** 

ENABLE / DISABLE FEATURES ********************/

$equal-feature: true;

$offset-feature: true;

​

/******************** 

BASIC ********************/

$grid: 12;

$gutter: 6px;

​

/******************** 

NAMING ********************/

$row: "row";