Saltar al contenido

cuaderno de campo

anotaciones

Menú
  • casa
    • dinou del carrer nou
  • cocina
    • pan
    • repostería
    • verdura
  • huerto
    • instrucciones sobre el huerto
    • plano del número 29
    • huerto del año 2025
  • humanidades
    • fonoteca
    • galería
  • juego
    • colección de roms
    • steamos en steam deck
    • lista de juego
    • dosbox
  • linux
    • bash
    • sistema operativo
    • ssh
  • web
    • apache
    • css
    • html5
    • javascript
    • mysql
    • php
Menú

masonería con css

Publicada el 4 de abril de 201726 de febrero de 2021 por ernesto
  • html
  • mediante columnas
    • css
    • claves
    • comportamiento
  • mediante grid
    • css
    • claves
    • comportamiento
  • fuentes
Puesto al día el 29 de abril de 2020.

html

<main class="masoneria">
     <div class="titulo">
          <h3>Título 1</h3>
          <p>Texto del elemento 1.</p>
     </div>
     <div class="titulo">
          <h3>Título 2</h3>
          <p>Texto del elemento 2.</p>
     </div>
</main>

mediante columnas

css

main.masoneria
{
     column-count: 4;
     column-gap: 1em;
}
div.titulo
{
     display: inline-block;
     margin: 0.6em 1%;
     outline: #DDD solid 3px;
     padding: 3%;
     text-align: center;
     width: 94%;
}
div.titulo img
{
     max-width: 100%;
}
div.titulo h3
{
     word-wrap: break-word;
}
div.titulo p
{
     text-align: left;
}

claves

  1. main.masoneria
    • column-count equivale al número de columnas en que se divide el elemento padre main.
    • column-gap resulta en el espacio libre entre las columnas.
  2. div.titulo
    • display: inline-block (no vale ni inline, ni block).
    • width de 94% ó de 100% si no hay padding que valga.
  3. div.titulo h3
    • word-wrap con break-word para evitar que el texto de h3 desborde el ancho de div.titulo.

comportamiento

  • los bloques se ordenan de arriba a abajo: el bloque 1 encima del 2 y no el uno junto al otro. de esta forma, en la primera línea, se mostrarían (por ejemplo) los bloques 1 | 4 | 7 y no los bloques 1 | 2 | 3.
  • si se añaden nuevos bloques a main.masoneria mediante javascript, éstos se dispondrán al final de la última columna (empujando, claro, el resto hacia arriba).

mediante grid

css

main.masoneria
{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 1.5em;
}
div.titulo
{
     outline: #DDD solid 3px;
     padding: 3%;
     text-align: center;
}
div.titulo img
{
     max-width: 100%;
}
div.titulo h3
{
     word-wrap: break-word;
}
div.titulo p
{
     text-align: left;
}

claves

  1. main.masoneria
    • display: grid convierte a los hijos directos de main (en este caso, los dos div.titulo) en elementos de una tabla.
    • la tabla, en este ejemplo, se define mediante grid-template-columns: tiene dos columnas que son exactamente del mismo tamaño (1fr).
    • grid-gap fija el espacio o margen entre las filas y las columnas.

comportamiento

  • los bloques se ordenan de izquierda a derecha: 1 | 2 | 3.
  • los elementos de cada fila se disponen todos a la misma altura: si dichos elementos no tienen la misma altura, quedarán espacios en blanco entre las distintas filas.
  • si se añaden nuevos bloques a main.masoneria mediante javascript, éstos se dispondrán al final de la última fila (siguiendo el orden de izquierda a derecha).

fuentes

  • «CSS Grid Layout» en MDN web docs.
  • cybmeta
  • w3bits
Etiquetado como column-count, column-gap, masonry
  • tilde sobre cualquier letra

    escríbase cualquier letra: q luego, con el cursor junto a la letra (puesto a su…

  • constante en heredoc

    una constante no devuelve su valor dentro de la sintaxis heredoc: define("C", "constante"); echo <<<HTML…

  • openelec + hdmi cec

    configuración del control remoto antes que nada, es necesario activar el modo de depuración (debug)…

RSS rutas fuera

  • La Naranja Metálica #104 (9×12) 2 de octubre de 2025 Belisario
  • Terror en Blanco: Monstruos lacustres, con Javier Resines 2 de octubre de 2025 Javier Resines
  • Barren Path – Grieving(2025) 30 de septiembre de 2025 Nicholas Mkhl
  • Beats and yelling: Castrator 30 de septiembre de 2025 Hate Meditations
  • Reseñas breves (septiembre de 2025) 29 de septiembre de 2025 Belisario
  • Anica, la hija del orangután en la revista DeMisterios 27 de septiembre de 2025 Javier Resines
  • Beats and yelling shorts, 27th September 25 27 de septiembre de 2025 Hate Meditations
  • CAMINANDO ENTRE MONSTRUOS 02 (Bestiario Sonoro): Basandere, la señora de los bosques 25 de septiembre de 2025 Javier Resines
  • CAMINANDO ENTRE MONSTRUOS 01 (BESTIARIO SONORO): Anica, la hija del orangután 22 de septiembre de 2025 Javier Resines

Archivo

cuaderno de campo 2011-2025