Grids CSS (Float)

Grids CSS com Float

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)

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

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

// Adicionar Media Queries para cada breakpoint desejado
@media #{$break-size} {
  @for $i from 1 through $grid-columns {
    .col-size-#{$i} {
      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: 0 calc(20px / 2);
}

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

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

// (...)

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

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;
}