Un diseño de cuadrícula adaptable básico con CSS & CSS3

Vista prévia

Descripción

Un diseño de cuadrícula flexible, totalmente adaptable, móvil y basado en las consultas de medios CSS y CSS3.

Funcionamiento

Estructura HTML de marcado.

<div class="container">
<div class="row">
<div class="col-6 color-1"></div>
</div>
<div class="row">
<div class="col-2 color-4"></div>
<div class="col-2 color-2"></div>
<div class="col-1 color-5 col-mobile"></div>
<div class="col-1 color-6 col-mobile"></div>
</div>
<div class="row">
<div class="col-4 color-6 col-mobile"></div>
<div class="col-2 color-4 col-mobile"></div>
</div>
<div class="row">
<div class="col-3 color-2"></div>
<div class="col-3 color-3"></div>
</div>
<div class="row">
<div class="col-2 color-4 col-mobile"></div>
<div class="col-4 color-6 col-mobile"></div>
</div>
</div>

El CSS para el estilo de la cuadrícula de diseño y hacer que responda para adaptarse a cualquier tamaño de pantalla.

body {
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: auto;
}
.row {
float: left;
width: 100%;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, col-40 {
float: left;
margin: 0 2% 20px 0;
}
.col-1 {
width: 15%;
}
.col-2 {
width: 32%;
}
.col-3 {
width: 49%;
}
.col-4 {
width: 66%;
}
.col-5 {
width: 83%;
}
.col-6 {
width: 100%;
}
div.row > div:last-child {
margin-right: 0;
}
.color-1 {
min-height: 150px;
background: coral;
}
.color-2 {
min-height: 150px;
background: limegreen;
}
.color-3 {
min-height: 150px;
background: #E9E9E9;
;
}
.color-4 {
min-height: 150px;
background: #424242;
;
}
.color-5 {
min-height: 150px;
background: #ccc;
;
}
.color-6 {
min-height: 150px;
background: #FF9900;
;
}

Las consultas de medios CSS3 hacen que el diseño de cuadrícula responda para adaptarse a cualquier tamaño de pantalla.

@media only screen and (max-width: 767px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
float: none;
margin: 0 2% 20px 2%;
width: 96%;
}
.col-mobile {
float: left;
width: 46%;
}
div.container > div:last-child {
margin-bottom: 0;
}
}