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

  • Metal as deathcult theme park 27 de junio de 2022 Hate Meditations
  • Blasphematory – The Lower Catacombs (2022) 24 de junio de 2022 Belisario
  • Beats and yelling: Serpent Ascending, Dinbethes, Atramentum 23 de junio de 2022 Hate Meditations
  • Necropolis Podcast #49 – Sleepwalker Pt. II 21 de junio de 2022 Hate Meditations
  • Nocturnus and the death of amateurism 19 de junio de 2022 Hate Meditations
  • Anuario del Center for Fortean Zoology 2022/2023 18 de junio de 2022 Javier Resines
  • I like the beats and I like the yelling: Koldkrypt, Hellevaerder, Magnatar 18 de junio de 2022 Hate Meditations
  • Further excursions into Industrial Black Metal 17 de junio de 2022 Raphael Alecto
  • Atlantean Kodex – The Golden Bough (2010) 17 de junio de 2022 Julio Cesar

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-2022