Cacher is the code snippet organizer for pro developers

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; // fracciones (recomendado)
  grid-template-columns: 70% 30%; //porcentajes
  grid-template-columns: repeat(3, 1fr); //shortcut para realizar 3 veces 1fr
  grid-template-columns: repeat(4, 1fr 2fr);// crea una columna 1fr seguida de
  otra columna 2fr y se repite
  
  grid-column-gap: 1em; //espacio lateral entre las columnas
  grid-row-gap: 1em; //espacio por debajo de las columnas
  grid-gap: 1em; //Espacio lateral y por debajo
  
  grid-auto-rows: 100px; // la altura del contenedor estatico
  grid-auto-rows: minmax(100px, auto); //define una altura por defecto, sin embargo,
  al crecer el contenido dentro, la altura se incrementa.
  
  //Alinear horizontalmente
  justify-items: start;//Alinea los elementos al inicio de los contenedores
  justify-items: center; //al centro
  justify-items: end; //Al final
  justify-items: stretch;//Default
  
  //Alinear verticalmente
  align-items: start;//Hacia arriba
  align-items: center; //Al centro
  align-items: end; //Hacia abajo
  align-items: stretch; //Default
  
  //Alinear individualmente
  .box1 {
    align-self: start; //Hacia arriba
  }
  .box2 {
    align-self: center; //Hacia el centro
  }
  
  //Alinea el contenedor a la izquierda individualmente
  .box3 {
    justify-self: end; //Hacia la izquierda
  }
  
  //Expander las columnas
  .box1 {
    grid-column: 1/3; //Horizontalmente
    grid-row: 1/3; //Verticalmente
  }
  
  //Expander y cambiar de lugar
  .box3 {
    grid-column: 2/4; //Empieza desde la posicion 2 y termina en la posicion 4
  }
  
  //Overlap
  .box4 {
    grid-colum: 1;
    grid-row: 2/4; //Empieza en la posicion 2 y termina en la posicion 4 (Arriba)
  }
  
}