Fundación: construcción semántica

Usando el conjunto de mixins de SASS, se genera un CSS de cuadrícula que se utiliza para construir su propia cuadrícula semántica.

Filas

El mixin grid-row () se usa para crear una fila.

.container {
   @include grid-row;
}

Columnas

El mixin grid-column () se utiliza para crear una columna. El ancho de la columna se puede definir de varias formas.

.container {
   @include grid-column;
   //sets 100% column count

   @include grid-column(3);
   //sets column count 25%

   @include grid-column(25%);
   //set percentage for column count

   @include grid-column(1 of 7);
   //custom fraction is set for columns
}

También se puede acceder a la columna de la cuadrícula como función. El valor porcentual se proporciona sin ningún CSS de columna de cuadrícula.

.main-content {
   width: grid-column(1 of 7);
}

Varias cuadrículas

El $ rejilla-column-count establece el número de columnas para todas las rejillas de forma predeterminada. Puede anularse dentro de una instancia de fila.

.container {
   @include grid-row(16) {
      .main-content {
         @include grid-column(5);
      }
      .sidebar {
         @include grid-column(11);
      }
   }
}

Sin generar ningún CSS de fila, puede cambiar temporalmente el contexto de la cuadrícula usando grid-context () mixin. Al emparejarlo con breakpoint () mixin, puede hacer que la cuadrícula responda.

@include grid-context(7) {
   .sidebar {
      @include grid-column(4);
   }
}