cuaderno de campo

anotaciones

Menú
  • casa
    • cocina
      • pan
      • verdura
    • dinou del carrer nou
    • nadal : una carta
    • plano
  • huerto
    • instrucciones sobre el huerto
    • huerto del año 2022
  • humanidades
    • fonoteca
      • Noches en Poderna
      • El canto de las aves
    • galería
    • mala lluna
    • rutas fuera
    • umbrario
    • El misterio de Sant Mena
  • jardín
    • instrucciones sobre el jardín
    • exterior
    • interior
    • viveros
  • juego
    • listado de juegos
  • linux
    • bash
    • sistema operativo
    • ssh
  • web
    • apache
    • css
    • html5
    • javascript
    • mysql
    • php
Menú

masonería con css

Publicado 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

  • HS: Laure le Prunenec (Rïcïnn, Öxxö Xööx, Corpo-Mente, ex-Igorrr, etc) 27 de marzo de 2023 hessianfirm
  • Gracias por asistir a la presentación de “Criptozoología en España” 27 de marzo de 2023 Javier Resines
  • Demilich “Last Show Ever” In Madrid Tonight 26 de marzo de 2023 Brett Stevens
  • Fourth Monarchy – Nocturnal Odes of a Wandering Spirit (2023) 25 de marzo de 2023 Brett Stevens
  • Esta tarde, Criptozoología con Vicente Fuentes 23 de marzo de 2023 Javier Resines
  • Beats and yelling from: Yaaroth, Verminous Serpent, Svraoz 22 de marzo de 2023 Hate Meditations
  • Xerrada: La importància de les llavors locals 22 de marzo de 2023 moon
  • Beats and yelling from: Cromlech, Contrarian, Skrying Mirror 21 de marzo de 2023 Hate Meditations
  • Necropolis #62 – On Burzum (Band Focus) 19 de marzo de 2023 Hate Meditations

Categorías

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

Archivo

cuaderno de campo 2011-2023