¿Que tal estimados lectores? Este tutorial que os traigo es para hacer una cuadrícula estilo pixels, porque la vida en cuadraditos es mejor, así que desarrollaremos una interfaz gráfica basada en cuadrados.
Librerías y Preparación
Necesitamos dos librerías, la primera jQuery y la segunda Masonry de David DeSandro, que incluiremos justo antes del </body> de nuestro archivo.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
// Inicializamos Masonry
$(document).ready(function(){
$('.grid-container').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
horizontalOrder: true
});
});
</script>
Generar el HTML
El HTML es sencillo, crearemos un grid-container para contener nuestros pixels y grid-item para cada pixel.
<div class="grid-container">
<div class="grid-item bg-text">
<h2>Pixels</h2><br>
Crea una cuadricula en forma de pixels para mostrar tu contenido.
</div>
<div class="grid-item grid-item-large bg-text">
<h2>¿Tutorial?</h2><br>
<a href="https://13node.com/redaccion/tutoriales/crear-cuadricula-estilo-pixels/">Leer tutorial en 13Node.com</a>
</div>
<div class="grid-item grid-item-large-v bg-image">
<img src="http://placehold.it/384x384/">
</div>
</div>
Como ves en el ejemplo, también hemos creado otras clases que explicaremos en detalle en el css.
El CSS, la guinda del pastel
.grid-container {
margin: 0 auto;
max-width: 100%;
padding: 0;
box-sizing: border-box;
background:
linear-gradient(90deg, #f2f2f2 1px, transparent 0),
linear-gradient(#f2f2f2 1px, transparent 0),
linear-gradient(90deg, #f2f2f2 1px, transparent 0),
linear-gradient(#f2f2f2 1px, transparent 0);
background-size:
192px 192px,
192px 192px,
192px 192px,
192px 192px;
}
.grid-item {
width: 192px;
height: 192px;
max-width: 192px;
max-height: 192px;
box-sizing: border-box;
padding: 20px;
}
.grid-container .grid-item.grid-item-large {
width: 384px;
height: 192px;
max-width: 384px;
max-height: 192px;
}
.grid-container .grid-item.grid-item-large-v {
width: 384px;
height: 384px;
max-width: 384px;
max-height: 384px;
}
@media (min-width: 768px) {
.grid-container .grid-item {
width: calc(100% / 3);
}
}
@media (min-width: 992px) {
.grid-container .grid-item {
width: calc(100% / 4);
}
}
.bg-image {
padding: 0;
}
.bg-text {
background-color: #f7f7f7;
}
Este CSS está diseñado para un layout de cuadrícula (grid) con contenedores y elementos de cuadrícula, optimizado para diferentes tamaños de pantalla y con estilos específicos para imágenes y texto. A continuación, te explico cada parte:
.grid-container
margin: 0 auto;: Centra el contenedor en la página.max-width: 100%;: Asegura que el contenedor no exceda el ancho de la ventana del navegador.padding: 0;: Elimina el relleno interno del contenedor.box-sizing: border-box;: Incluye el padding y el borde en el cálculo del ancho y alto del elemento.background:: Crea un patrón de cuadrícula usando gradientes lineales. Se repite en cuatro direcciones para formar un patrón que simula las líneas de una cuadrícula. Cada línea tiene 1px de ancho y se separa cada 192px, creando un efecto de cuadrícula sobre un fondo transparente.
.grid-item
- Establece el tamaño de los elementos de la cuadrícula a 192px por 192px.
box-sizing: border-box;: El tamaño total del elemento incluye su relleno y borde.padding: 20px;: Añade espacio interior alrededor del contenido dentro de cada elemento de la cuadrícula.
.grid-container .grid-item.grid-item-large
- Variante del elemento de cuadrícula que es dos veces más ancho que el estándar. Útil para elementos que necesitan destacarse o contener más contenido.
.grid-container .grid-item.grid-item-large-v
- Variante que es tanto doble de ancho como de alto, ideal para elementos de gran tamaño o más significativos dentro de la cuadrícula.
@media (min-width: 768px) y @media (min-width: 992px)
- Estas son reglas de media query que ajustan el ancho de los elementos de la cuadrícula basándose en el ancho de la pantalla, permitiendo un diseño responsivo. A medida que la pantalla se hace más grande, los elementos ocupan una menor fracción del ancho del contenedor, pasando de ocupar 1/3 a 1/4 del ancho disponible, lo que permite una disposición más flexible y adaptativa.
.bg-image
- Estilo específico para elementos de imagen dentro de la cuadrícula, eliminando el relleno para que la imagen pueda ocupar todo el espacio disponible.
.bg-text
- Define un fondo claro para elementos de texto, mejorando la legibilidad y contrastando con el posible patrón de cuadrícula del fondo.
Este conjunto de estilos ofrece una base robusta para crear un sistema de cuadrícula visualmente atractivo y responsivo, adecuado para galerías de imágenes, portfolios, y más, con especial atención a la presentación de elementos destacados y la adaptabilidad a diferentes tamaños de pantalla.
Podemos obviamente experimentar y hacer cosas, os dejamos el codepen donde experimentamos.
Mira el Pen Pixels! Tutorial 13Node.com by Danilo U. (@trecenode) en CodePen.