div - title css style
¿Cómo crear una vista de cuadrícula/mosaico? (8)
Puede usar display: grid
por ejemplo:
Esta es una cuadrícula con 7 columnas y sus filas tienen tamaño automático.
.myGrid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: auto;
grid-gap: 10px;
justify-items: center;
}
Para obtener más detalles, utilice el siguiente enlace: https://css-tricks.com/snippets/css/complete-guide-grid/
Por ejemplo, tengo una clase .article, y quiero ver esta clase como vista de cuadrícula. Así que apliqué este estilo:
.article{
width:100px;
height:100px;
background:#333;
float:left;
margin:5px;
}
Ese estilo hará que el artículo se vea mosaico / cuadrícula. Funciona bien con altura fija. Pero si quiero establecer la altura en automático (estirar automáticamente según los datos que contiene), la cuadrícula se ve desagradable.
Y quiero hacer la vista así:
Con el Módulo de cuadrícula CSS puede crear un diseño bastante similar .
Demo de Codepen
1) Establecer tres columnas de cuadrícula de ancho fijo
ul {
display: grid;
grid-template-columns: 150px 150px 150px;
...
}
2) Asegúrese de que los artículos con una gran altura abarquen 2 filas
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
grid-row: span 2;
}
body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-gap: 1rem;
justify-content: center;
align-items: center;
/* boring properties: */
list-style: none;
width: 90vw;
height: 85vh;
margin: 4vh auto;
border: 5px solid green;
padding: 1rem;
overflow: auto;
counter-reset: item;
}
li {
position: relative;
}
li:after {
content: counter(item);
counter-increment: item;
position: absolute;
padding: 0.3rem;
background: salmon;
color: white;
left:0;
top:0;
}
img {
outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
grid-row: span 2;
}
<ul>
<li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>
Demo de Codepen
Los problemas:
- Los espacios entre los artículos no serán uniformes
- Debe configurar manualmente los elementos grandes / altos para que abarquen 2 o más filas
- Soporte de navegador limitado :)
Este tipo de diseño se llama diseño de mampostería . La mampostería es otro diseño de cuadrícula pero completará el espacio en blanco causado por la diferencia de altura de los elementos.
jQuery Masonry es uno de los plugins de jQuery para crear el diseño de mampostería.
Alternativamente, puede usar las column CSS3. Pero por ahora el complemento basado en jQuery es la mejor opción ya que existe un problema de compatibilidad con la columna CSS3.
Hay un ejemplo basado en la cuadrícula .
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
padding: 10px;
}
.grid-layout .item {
padding: 15px;
color: #fff;
background-color: #444;
}
.span-2 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.span-3 {
grid-column-end: span 3;
grid-row-end: span 4;
}
<div class="grid-layout">
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-3">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-2">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-3">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-2">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
</div>
basado en este código-pluma de Rachel Andrew FTW
La mejor opción para resolver eso con solo css es usar la propiedad css column-count.
.content-box {
border: 10px solid #000000;
column-count: 3;
}
Mire esto para obtener más información: https://developer.mozilla.org/en/docs/Web/CSS/column-count
Puedes usar flexbox.
Coloque sus elementos en un contenedor flexible de columna multilínea
#flex-container { display: flex; flex-flow: column wrap; }Reordenar los elementos, de modo que el orden DOM se respete horizontalmente en lugar de verticalmente. Por ejemplo, si quieres 3 columnas,
#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */Fuerce un salto de columna antes del primer elemento de cada columna:
#flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ }Lamentablemente, no todos los navegadores admiten saltos de línea en flexbox todavía. Sin embargo, funciona en Firefox.
#flex-container {
display: flex;
flex-flow: column wrap;
}
#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */
#flex-container > :nth-child(-n + 3) {
page-break-before: always; /* CSS 2.1 syntax */
break-before: always; /* New syntax */
}
/* The following is optional */
#flex-container > div {
background: #666;
color: #fff;
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }
<div id="flex-container">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
</div>
y si quiere ir más allá de la albañilería, use isotope http://isotope.metafizzy.co/ es la versión avanzada de mampostería (desarrollada por el mismo autor) no es CSS puro, utiliza la ayuda de Javascript pero es muy popular, por lo que encontrarás muchos documentos
si le resulta muy complicado, existen muchos complementos premium que ya basaron su desarrollo en isótopos, por ejemplo, los Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020
Ahora que CSS3 está ampliamente disponible y es compatible a través de los principales navegadores, es hora de una solución pura equipada con la herramienta de fragmento SO.
Para crear el diseño de mampostería usando CSS3, el column-count column-gap junto con column-gap entre column-gap sería suficiente. Pero también he usado media-queries para hacerlo receptivo.
Antes de sumergirse en la implementación, considere que sería mucho más seguro agregar una reserva de la biblioteca de jQuery Masonry para hacer que su código sea compatible con el explorador heredado, especialmente IE8-:
<!--[if lte IE 9]>
<script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->
Aquí vamos:
.masonry-brick {
color: #FFF;
background-color: #FF00D8;
display: inline-block;
padding: 5px;
width: 100%;
margin: 1em 0; /* for separating masonry-bricks vertically*/
}
@media only screen and (min-width: 480px) {
.masonry-container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 768px) {
.masonry-container {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 960px) {
.masonry-container {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
<div class="masonry-container">
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>