Un diseño de mampostería es aquel en el que las cosas se colocan una tras otra en línea recta. Los objetos migrarán a cualquier espacio que dejen los elementos más cortos en la primera línea a medida que pasan a la siguiente línea. Es comparable a un diseño de cuadrícula con colocación automática, excepto que las filas no siguen una cuadrícula estrecha. En su mayoría, este diseño se usa para mostrar imágenes, tarjetas o publicaciones en un sitio web. Hay varias formas en que podemos lograrlo usando JavaScript u otros lenguajes de secuencias de comandos, pero aquí lo lograremos solo usando CSS. En este artículo, veremos cómo podemos construir un diseño de mampostería usando HTML y CSS.
Enfoque: hay un par de formas que podemos usar para lograr un diseño de mampostería, pero este enfoque aquí implica el uso de conocimientos no complejos y el uso de nada más que CSS básico, ni siquiera SCSS. Para lograr el diseño, implementaremos un diseño de varias columnas. Aquí los artículos no irán en orden vertical, sino en orden horizontal. Básicamente, el ancho de todos los elementos se mantiene igual y luego la altura se ajusta en consecuencia. Eso significa que mantenemos igual la relación ancho-alto de los elementos, así que ajustamos la altura de los elementos con respecto a esa relación.
Estamos utilizando la pantalla de diseño de cuadrícula y en lugar de colocar los elementos de manera horizontal, los colocamos de manera vertical. Debido a que el ancho de los elementos será idéntico, no habrá espacio debajo de los elementos. Además, el diseño responde completamente y se ajusta de acuerdo con el tamaño de la pantalla. Este enfoque solo puede ser un problema para usar cuando mostramos resultados de búsqueda porque entonces los primeros resultados se mostrarán al final de la cuadrícula.
Propiedad utilizada :
- Propiedad de visualización : esta propiedad se utiliza principalmente para determinar cómo se alinearán y mostrarán todos los elementos de la página web. Estamos usando principalmente el valor de Grid de la propiedad. La visualización de cuadrícula es lo más parecido a un diseño de mampostería y desempeña el papel más importante en la disposición de los elementos en ese diseño.
Ejemplo: Este ejemplo describe los diseños de mampostería CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #000;
font: 1.1em Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
display: block;
}
figure {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
figure > img {
grid-row: 1 / -1;
grid-column: 1;
}
figure a {
color: black;
text-decoration: none;
}
figcaption {
grid-row: 2;
grid-column: 1;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.2em 0.5em;
justify-self: start;
}
.container {
column-count: 4;
column-gap: 10px;
}
</style>
</head>
<body>
<div style="margin: 3rem;
font-family: Roboto,
sans-serif">
<h1 style="color: green;
text-align: center">
GeeksforGeeks
</h1>
<h3 style="text-align: center;
color: aliceblue">
CSS Masonry Layouts
</h3>
</div>
<div class="container">
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">1</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">2</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="gfgImg" />
<figcaption>
<a href="#">3</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">4</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">5</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">6</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">7</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">8</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">9</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">10</a>
</figcaption>
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="gfgImg"/>
<figcaption>
<a href="#">11</a>
</figcaption>
</figure>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA