The Flash The Flash  • 23.02.17 16:45

[CSS]Sistema de grid (SEM BOOTSTRAP) Empty [CSS]Sistema de grid (SEM BOOTSTRAP) 23.02.17 16:45

Bom, muito de vocês devem utilizar um sistema de grid mas nem devem saber. Os grids surgiram com a proposta de serem uma ferramenta de ordem e arranjo de elementos visuais, uma forma estudada de se resolver visualmente uma composição e obter coesão no layout.

O css é bem básico:

Código:

.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*="grids"] {
  min-height: 50px;
  display: block;
  float: left;
  margin-bottom: 20px;
  margin-right: 2%;
  background: none repeat scroll 0 0 white;
}

[class*="grids"]:last-child, .omega, .end {
  margin: 0;
}

.grids1 {
  width: 6.5%;
}

.grids2 {
  width: 15%;
}

.grids3 {
  width: 23.5%;
}

.grids4 {
  width: 32%;
}

.grids5 {
  width: 40.5%;
}

.grids6 {
  width: 49%;
}

.grids7 {
  width: 57.5%;
}

.grids8 {
  width: 66%;
}

.grids9 {
  width: 74.5%;
}

.grids10 {
  width: 83%;
}

.grids11 {
  width: 91.5%;
}

.grids12 {
  width: 100%;
  margin: 0;
}

@media (max-width: 767px) {
  [class*="grids"] {
     
  }
}


@media (max-width: 640px) {
  .container {
      width: 90%;
  }

  [class*="grids"] {
      width: 100%;
      margin-bottom: 20px;
  }

  [class*="grids"]:last-child {
      margin-bottom: 20px;
  }
}

Para visualizar, podes utilizar este HTML:

Código:

<div class="row">

<div class="grids4"></div>
<div class="grids4"></div>
<div class="grids4"></div>

</div>

<div class="row">

<div class="grids5"></div>
<div class="grids7"></div>

</div>

<div class="row">

<div class="grids6"></div>
<div class="grids6"></div>

</div>

<div class="row">

<div class="grids7"></div>
<div class="grids5"></div>

</div>

<div class="row">

<div class="grids8"></div>
<div class="grids4"></div>

</div>

<div class="row">

<div class="grids9"></div>
<div class="grids3"></div>

</div>

<div class="row">

<div class="grids10"></div>
<div class="grids2"></div>

</div>

<div class="row">

<div class="grids11"></div>
<div class="grids1"></div>

</div>

<div class="row">

<div class="grids12"></div>

</div>

Créditos: Alex
Demo: Clique Aqui
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.