12 Cols Grid System

# 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";

// variables

$size-container: .333rem !default;
3
$col-padding: 0.37rem !default;

$cols:  !default;
5
$gutter-x: $col-padding;

$gutter-y: 0;
7
​

// mediaqueries
9
​

// breakpoint del sistema de columna

$mq: (
12
  xs: 0,

  sm: 576px,

  md: 768px,

  lg: 992px,

  xl: 10px,

  xxl: 1400px

)!default;

​
20
$sizes: 0, 576px, 768px, 992px, 1200px, 1400px;

​

@mixin make-container{

/* Mixin

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 

​

/* Media Queries */

@mixin breakpoint($size) {

  @if $size == small {

    @media screen and (max-width: 40em) {

      @content;

    }

  } @else if $size == medium {

    @media screen and (min-width: 40em) and (max-width: 60em) {

      @content;

    }

  } @else if $size == large {

    @media screen and (min-width: 60em) {

      @content;

    }

  }

}

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }

html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}

​

.wrapper {

  position: relative;
10
  margin: auto;

}

​

.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21
​

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}