Cree una cuadrícula de mampostería con flexbox(u otro CSS)
css3 multiple-columns (3)
Me gustaría lograr un efecto de cuadrícula en CSS con elementos que tengan el mismo ancho en tamaño pero no en altura. Me gustaría que el elemento debajo esté siempre a 50 px del inferior, lo que sea que siga.
Lo intenté con carrozas, pero ese error. Así que intenté con Flex, pero todavía no hace lo que quiero.
.container
display: flex
flex-wrap wrap
align-content flex-start
align-items flex-start
Lo que me gustaría:
Lo que tengo:
Le sugiero que ponga cada columna en un
div
separado.
De esa forma, flexbox no lo fuerza a un diseño similar a una tabla.
Aunque utilicé alturas fijas en el fragmento, debería funcionar dinámicamente sin ningún problema
.container {
display: flex;
}
.col {
flex: 1;
}
.col div {
background-color: #2C2F33;
margin: 16px 8px;
}
<div class="container">
<div class="col">
<div style="height: 200px"></div>
<div style="height: 100px"></div>
<div style="height: 200px"></div>
</div>
<div class="col">
<div style="height: 150px"></div>
<div style="height: 250px"></div>
<div style="height: 200px"></div>
</div>
<div class="col">
<div style="height: 300px"></div>
<div style="height: 150px"></div>
<div style="height: 100px"></div>
</div>
</div>
Pruebe el nuevo diseño de cuadrícula CSS :
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
<grid-container>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
jsFiddle demo
Cómo funciona:
- Establecer un contenedor de cuadrícula a nivel de bloque.
-
La propiedad
grid-auto-rowsestablece la altura de las filas generadas automáticamente. En esta cuadrícula, cada fila mide 50 px de alto. -
La propiedad
grid-gapes una abreviatura degrid-column-gapygrid-row-gap. Esta regla establece una brecha de 10 píxeles entre los elementos de la cuadrícula. (No se aplica al área entre los artículos y el contenedor). -
La propiedad
grid-template-columnsestablece el ancho de las columnas definidas explícitamente.La notación de
repeatdefine un patrón de columnas (o filas) repetidas.La
auto-fillle dice a la cuadrícula que alinee tantas columnas (o filas) como sea posible sin desbordar el contenedor. (Esto puede crear un comportamiento similar alflex-wrap: wrapdel diseñoflex-wrap: wrap).La función
minmax()establece un rango de tamaño mínimo y máximo para cada columna (o fila). En el código anterior, el ancho de cada columna será un mínimo del 30% del contenedor y un máximo de cualquier espacio libre disponible.La unidad
frrepresenta una fracción del espacio libre en el contenedor de la cuadrícula. Es comparable a la propiedadflex-growflexbox. -
Con
grid-rowyspanles estamos diciendo a los elementos de la cuadrícula cuántas filas deben abarcar.
Soporte de navegador para CSS Grid
- Chrome: soporte completo a partir del 8 de marzo de 2017 (versión 57)
- Firefox: soporte completo a partir del 6 de marzo de 2017 (versión 52)
- Safari: soporte completo a partir del 26 de marzo de 2017 (versión 10.1)
- Edge: soporte completo a partir del 16 de octubre de 2017 (versión 16)
- IE11: no se admite la especificación actual; admite versión obsoleta
Aquí está la imagen completa: http://caniuse.com/#search=grid
Función de superposición de cuadrícula genial en Firefox: en las herramientas de desarrollo de Firefox, cuando inspeccionas el contenedor de cuadrícula, hay un pequeño icono de cuadrícula en la declaración CSS. Al hacer clic, muestra un esquema de su cuadrícula en la página.
Más detalles aquí: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
Sugeriría un diseño de columna.
Se puede hacer que responda fácilmente a su gusto declarando tanto
column-width
column-count
.
El beneficio sobre la solución de Emonadeo (sin ofender) es que sigue respondiendo sin ningún margen adicional agregado.
El inconveniente es que los elementos se ordenan primero en columnas, no en filas.
.container {
/* min width of a single column */
column-width: 140px;
/* maximum amount of columns */
column-count: 4;
/* gap between the columns */
column-gap: 16px;
}
.container div {
/* important so a single div never gets distributed between columns */
break-inside: avoid-column;
background-color: #2C2F33;
margin-bottom: 16px;
color:white;
}
<div class="container">
<div style="height: 200px">a</div>
<div style="height: 100px">b</div>
<div style="height: 200px">c</div>
<div style="height: 150px">d</div>
<div style="height: 250px">e</div>
<div style="height: 200px">f</div>
<div style="height: 300px">g</div>
<div style="height: 150px">h</div>
<div style="height: 100px">i</div>
</div>