Grids CSS (Flexbox)

Grids CSS com Flexbox

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

Estrutura HTML

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

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

Estrutura CSS

.row {
  display: flex;
  flex-wrap: nowrap;
  margin-left: calc(-$gutter / 2);
  margin-right: calc(-$gutter / 2);
  // O gutter aqui é NEGATIVO
}

.col {
  margin-left: calc($gutter / 2);
  margin-right: calc($gutter / 2);
}

.sz-x {
  // O padrão de flex é '0 1 auto'
  flex: 0 0 calc(x / $maximum-columns * 100% - $gutter);
  max-width: calc(x / $maximum-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:

// 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 / 6 * 100% - 20px);
  max-width: calc(1 / 6 * 100% - 20px);
}

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

// (...)

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

// Adicionar Media Queries para cada breakpoint desejado.

2. Mais semântico, menos flexível

Em breve.