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 juegos
    • 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

  • Metal Listening Raid: Massacre – From Beyond (1991) 16 de junio de 2025 Brett Stevens
  • Beats and yelling: Tombstone 16 de junio de 2025 Hate Meditations
  • The Alien Medieval World of Abigor’s Channeling the Quintessence of Satan 15 de junio de 2025 Guest Writer
  • Some words on escapism 15 de junio de 2025 Hate Meditations
  • Entrevista a Defernos para en fanzine Aurora de la Resistencia de Chile. 15 de junio de 2025 Iberian Darkness
  • Fight HIV/AIDS With the Hashtag #ChuckSchuldinerDiedOfAIDS 12 de junio de 2025 Paxton Jackson
  • Hoy, en Caminando entre Monstruos, el Saetón de Sierra Morena, con Javier Resines 12 de junio de 2025 Javier Resines
  • Evil Incarnate – Lucifer’s Crown (2023) 10 de junio de 2025 Brett Stevens
  • Talking Death Metal On The Aureus Press Podcast 6 de junio de 2025 Brett Stevens

Categorías

apache bash casa cocina corral css fonoteca galería html5 huerto humanidades humanidades digitales jardín javascript juego linux mysql pan php repostería Sin categoría sistema operativo ssh verdura web

Archivo

cuaderno de campo 2011-2025