Snippets Collections
/*

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

|||||GRIDER|||||

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

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

*/

​

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

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

$equal-feature: true;

$offset-feature: true;

​

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

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

$grid: 12;

$gutter: 6px;

​

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

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

$row: "row";
$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,
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)
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)
.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;
}
# 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
star

Wed Dec 27 2023 15:16:13 GMT+0000 (Coordinated Universal Time) https://web.dev/articles/css-subgrid

#grid #subgrid
star

Sat Mar 04 2023 18:34:32 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/Expgyma

#scss #grid #grid_system
star

Sat Mar 04 2023 18:26:21 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/jOpgXLL

#grid #scss #grid_system
star

Wed Mar 16 2022 19:39:14 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

#css #sass #grid #minmax()
star

Tue Mar 15 2022 00:59:53 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/es/docs/Web/CSS/minmax()

#css #sass #grid #minmax()
star

Tue Mar 01 2022 01:06:42 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas

#css #grid #areas #tempaltes
star

Wed Feb 09 2022 18:13:34 GMT+0000 (Coordinated Universal Time) https://www.kaggle.com/jainamshah17/pytorch-starter-image-classification

#boilerplate #python #grid
star

Thu Jul 22 2021 23:16:22 GMT+0000 (Coordinated Universal Time) https://grid.malven.co/

#css #grid

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension