Diseño dinámico de cuadrícula simple con CSS & CSS3

Vista prévia

Descripción

Un diseño de cuadrícula de Pinterest simple, dinámico, fluido y totalmente adaptable con efectos flotantes elegantes basados en transiciones CSS y CSS3 & transforma. No se requiere ningún JavaScript. Ideal para sitios web de portafolio que funcionan bien tanto en dispositivos de escritorio como móviles.

Funcionamiento

Cree el código HTML para un diseño de cuadrícula siguiendo la estructura de marcado como esta.

<div class="clearfix wrap">


 <!--Column#1-->

<div class="col col2">


<div class="box box6"></div>


<div class="box box4"></div>


<div class="box box2"></div>

</div>


<!--Column#2-->

<div class="col col3">


<div class="box box2"></div>


<div class="box box6"></div>


<div class="col col3">



<div class="box box4"></div>


</div>


<div class="col col3">



<div class="box box4"></div>


</div>


<div class="col col4">



<div class="box box4"></div>


</div>

</div>


<!--Column#3-->

<div class="col col1">


<div class="box box4"></div>


<div class="box box6"> </div>


<div class="box box2"></div>

</div>


<!--Column#4-->

<div class="col col4">


<div class="col col5">



<div class="box box3"></div>



<div class="box box2"></div>


</div>


<div class="col col5">



<div class="box box2"></div>



<div class="box box3"></div>


</div>


<div class="box box7"></div>

</div>
</div>

Los estilos CSS/CSS3 requeridos.

.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

/*CSS RESET*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }

body { line-height: 1; }

ol,
ul { list-style: none; }

blockquote,
q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {

content: '';

content: none;
}

table {

border-collapse: collapse;

border-spacing: 0;
}

/*GLOBALS*/

a { text-decoration: none; }

body,
hmtl {

background: #ccc;

font-family: Arial, sans-serif;
}

/*WRAPPER*/

.wrap {

width: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 8px;
}

/*COLUMNS*/

.col {

float: left;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

width: 20%;

padding: 8px;
}

.col1 { width: 10%; }

.col2 { width: 20%; }

.col3 { width: 30%; }

.col4 { width: 40%; }

.col5 { width: 50%; }

.col6 { width: 60%; }

.col7 { width: 70%; }

.col8 { width: 80%; }

.col9 { width: 90%; }

.col10 { width: 100%; }

/*SUB-COLUMN*/

.col .col {

padding: 0;

padding-left: 0px;
}

.col .col ~ .col { padding-left: 16px; }

.col .col1 { width: 10%; }

.col .col2 { width: 20%; }

.col .col3 { width: 30%; }

.col .col4 { width: 40%; }

.col .col5 { width: 50%; }

.col .col6 { width: 60%; }

.col .col7 { width: 70%; }

.col .col8 { width: 80%; }

.col .col9 { width: 90%; }

.col .col10 { width: 100%; }

/*BOXES*/

.box {

width: 100%;

margin-bottom: 12px;

background: #999;

clear: both;

background-color: #eaeaea;

box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;

border: 5px solid #fff;

background-position: center;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

text-align: center;

color: #fff;

cursor: pointer;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

transition: all 0.2s ease;
}

.box:hover {

-moz-transform: scale(0.98);

-webkit-transform: scale(0.98);

-o-transform: scale(0.98);

-ms-transform: scale(0.98);

transform: scale(0.98);
}

.box1 { height: 50px; }

.box2 { height: 100px; }

.box3 { height: 150px; }

.box4 { height: 200px; }

.box5 { height: 250px; }

.box6 { height: 300px; }

.box7 { height: 350px; }

.box8 { height: 400px; }

.box9 { height: 450px; }

.box10 { height: 500px; }

/*TEXT*/

h2,
span {

padding: 0 15px;

text-shadow: rgba(0,0,0,0.8) 0px 0px 3px;
}

h2 {

font-size: 24px;

font-weight: bold;

font-family: 'Kaushan Script', cursive;

margin-bottom: 4px;
}

span { font-size: 14px; }

 @media screen and (max-width: 1100px) {

.col1 { width: 20%; }

.col2 { width: 40%; }

.col3 { width: 60%; }

.col4 { width: 80%; }

.col5 { width: 100%; }

.col6 { width: 120%; }

.col7 { width: 140%; }

.col8 { width: 160%; }

.col9 { width: 180%; }

.col10 { width: 200%; }
}
 @media screen and (max-width: 678px) {

.col { width: 100%; }

.col .col {

width: 100%;

padding-left: 0 !important;
}
}

Este impresionante diseño de cuadrícula CSS3 es creado por < a href = "https://codepen.io/AndreCortellini" target = "_ blank" rel = "noopener" > AndreCortellini . Puede comprobar su perfil < a href = "https://codepen.io/AndreCortellini" target = "_ blank" rel = "noopener" > aquí para más CSS3 & diseños de JavaScript.