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

  • CAMINANDO ENTRE MONSTRUOS 04 (Bestiario Sonoro): Drac de Na Coca 23 de octubre de 2025 Javier Resines
  • Karbach Brewery Rodeo Clown Double IPA (2025) 22 de octubre de 2025 Brett Stevens
  • Beats and yelling: Cultic 22 de octubre de 2025 Hate Meditations
  • Beats and yelling shorts, 20th October 25 20 de octubre de 2025 Hate Meditations
  • Karbach Brewery Hopadillo Imperial IPA (2025) 20 de octubre de 2025 Brett Stevens
  • Eureka Heights Final Boss Imperial IPA (2025) 20 de octubre de 2025 Brett Stevens
  • Tertulia con Juan Gomez, Pablo Vergel y Álvaro Martín: Spring-heeled Jack 19 de octubre de 2025 Javier Resines
  • Beats and yelling: Heruvim 17 de octubre de 2025 Hate Meditations
  • Please read the following scenario carefully 15 de octubre de 2025 Hate Meditations

Archivo

cuaderno de campo 2011-2025