Grids CSS (Float)

Grids CSS com Float

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 {
  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);
  float: left;
}

.sz-x {
  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: 0 calc(20px / 2);
}

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

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

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

// (...)

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

// Adicionar Media Queries para cada breakpoint desejado.

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

Bom, pelo menos pro meu nível de conhecimento atual é bem menos flexível de se implementar, mas em compensação, é bem mais simples de se construir e requer muito menos código.

Estrutura HTML

<div class="l-wrap">
  <div class="number-col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

Estrutura CSS

// .l-wrap é apenas um container, mas serve de exemplo de classe semântica.
.l-wrap {
  max-width: 40em;
  margin-right: auto;
  margin-left: auto;
}

.number-col-grid .grid-item {
  width: calc((100% - $gutter * $number) / $number);
  margin-right: calc($gutter / 2);
  margin-left: calc($gutter / 2);
  float: left;
}

Na prática

HTML:

<div class="l-wrap">
  <div class="three-col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

CSS:

.l-wrap {
  max-width: 40em;
  margin-right: auto;
  margin-left: auto;
}

.three-col-grid .grid-item {
  width: calc((100% - 20px * 3) / 3);
  margin-right: calc(20px / 2);
  margin-left: calc(20px / 2);
  float: left;
}