Grids CSS (Flexbox)

Grids CSS com Flexbox

Opção 1: Mais flexível, menos semântico

Estrutura HTML

<div class="row">
  <div class="col -size-x">Item</div>
  <div class="col -size-x">Item</div>
  <div class="col -size-x">Item</div>
</div>

<!-- Onde size refere à media query e x ao tamanho do div em colunas -->

Estrutura CSS (com SCSS)

// Variáveis
$grid-columns: 12;
$gutter: 20px;

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-#{$gutter} / 2);
  margin-right: calc(-#{$gutter} / 2);
}

.col {
  width: 100%; // Ocupa coluna se conteúdo for pequeno
  margin-left: calc(#{$gutter} / 2);
  margin-right: calc(#{$gutter} / 2);
}

// Adicionar Media Queries para cada breakpoint desejado
@media #{$break-size} {
  @for $i from 1 through $grid-columns {
    .col-size-#{$i} {
      flex: 0 0 calc(#{$i} / #{$grid-columns} * 100% - #{$gutter});
      max-width: calc(#{$i} / #{$grid-columns} * 100% - #{$gutter});
    }
  }
}

Na prática

HTML:

<!-- Assumindo que o layout possui 6 colunas -->
<div class="row">
  <div class="col -md-2">Item</div>
  <div class="col -md-2">Item</div>
  <div class="col -md-2">Item</div>
</div>

CSS:

// CSS Compilado
  // gutter: 20px
  // colunas: 6

.row {
  margin-left: calc(-20px / 2);
  margin-right: calc(-20px / 2);
}

.col {
  margin-left: calc(20px / 2);
  margin-right: calc(20px / 2);
}

// Um estilo para cada tamanho desejado

.md-1 {
  flex: 0 0 calc(1 / 12 * 100% - 20px);
  max-width: calc(1 / 12 * 100% - 20px);
}

// (...)

.md-12 {
  flex: 0 0 calc(12 / 12 * 100% - 20px);
  max-width: calc(12 / 12 * 100% - 20px);
}

2. Mais semântico, menos flexível

Em breve.