Minimalista albañilería-como CSS Grid layout
| Autor: | leoneloliver |
|---|---|
| Views Total: | 3,132 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 22, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Una implementación CSS pura más simple del diseño de cuadrícula adaptable de albañilería y Pinterest.
Funcionamiento
Agregue sus elementos de rejilla al diseño de mampostería como esto:
<div class="masonry"> <div class="item"> <img src="1.jpg"> </div> <div class="item"> <div class="text-box">Text Block 1</div> </div> <div class="item"> <img src="2.jpg"> </div> <div class="item"> <div class="text-box">Text Block 2</div> </div> ... </div>
Los estilos CSS principales:
.masonry {
/* Masonry container */
column-count: 4;
column-gap: 1em;
max-width: 1300px;
margin: 0 auto;
}
.item {
display: inline-block;
background: #fff;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.item .text-box {
padding: 1.5em;
padding-top: 8px;
} Haga que la imagen y otros elementos respondan:
img, iframe {
max-width: 100%;
height: auto;
display: block;
}
