Sistema de grillas al estilo Bootstrap con CSS Grid y SASS

Muchos de nosotros en nuestro día a día como maquetadores frontend o bien diseñando una interfaz como backend utilizamos bootstrap debido a su sistema de grillas, fácil de integrar, rápido y sin utilizar código de más.

¿Pero si te digo que puedes hacer un sistema de grillas responsive con solo unas cuantas lineas de código con el hermoso CSS Grid y SASS?

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 15px;
}

@for $i from 1 through 12 {
  .grid-#{$i} {
    grid-column: span ($i);
  }
}

En .grid establecemos su display grid, 12 columnas como lo usual y con grid-gap el espaciado que deseemos darles, en este caso yo uso uno de 15px.

Luego pasamos a lo interesante, creamos un bucle con @for para ir de 1 a 12, luego dentro declaramos la clase .grid-#{$1} lo que hacemos allí es es crear 12 clases que luego compiladas saldrán de esta manera .grid-1, .grid-2 ... .grid-12 con esto ya tenemos lo principal, pero dentro de esta clase volvemos a usar la variable $i en grid-column esta propiedad sirve para que un elemento tome los espacios en columnas que tu deses, el mismo funcionamiento de bootstrap pero en grid.

Luego de realizar esto, podemos pasar a hacer los @mediaqueries que seguirán la misma filosofía:

@media only screen and (min-width: 576px)  {
  @for $i from 1 through 12 {
    .grid-xs-#{$i} {
      grid-column: span ($i);
    }
  }
}

@media screen and (min-width: 768px) {
  @for $i from 1 through 12 {
    .grid-md-#{$i} {
      grid-column: span ($i);
    }
  }
}

@media (min-width: 992px) {
  @for $i from 1 through 12 {
    .grid-lg-#{$i} {
      grid-column: span ($i);
    }
  }
}

@media (min-width: 1200px) {
  @for $i from 1 through 12 {
    .grid-xl-#{$i} {
      grid-column: span ($i);
    }
  }
}

Con estas pocas lineas de código podremos lograr obtener nuestro sistema de grillas rápido y sencillo, lo demás es solo maquetar y realizar una interfaz increíble.