[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
Demo: Clique Aqui