Saltar a contenido

Grids

Las grillas o grids son conjuntos de bloques agrupados.

Configuración

Las grids deben habilitarse en el archivo de configuración:

Habilitacion de grillas
markdown_extensions: 
  - attr_list
  - md_in_html

Grillas de tarjetas

Sintaxis de lista (elementos simples)

La forma más elemental del uso de card grids consiste en rodear una lista dentro de un objeto div especial, de esta manera cada item se convierte en un bloque animado al renderizarse:

Grilla - Elementos simples
<div class="grid cards" markdown>
- :fontawesome-brands-html5: __HTML__ para contenido y estructura
- :fontawesome-brands-js: __JavaScript__ para interactividad
- :fontawesome-brands-css3: __CSS__ para estilos

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... para qué?
</div>

Con el símbolo > se crean bloques con la animación anulada.

El resultado es el mostrado a continuación:

  • HTML para contenido y estructura
  • JavaScript para interactividad
  • CSS para estilos

Internet Explorer ... para qué?

Sintaxis de lista (elementos compuestos)

Los bloques admiten múltiple contenido el cual puede separarse con la secuencia ---:

Grilla - Elementos compuestos
<div class="grid cards" markdown>

-   :material-clock-fast:{ .lg .middle } __Instala en 5 minutos__

    ---

    Instala [`mkdocs-material`](#) con [`pip`](#) y ejecuta en minutos

    [:octicons-arrow-right-24: Comenzando](#)

-   :fontawesome-brands-markdown:{ .lg .middle } __Es sólo Markdown__

    ---

    Enfóquese en su contenido  y genere un sitio estático adaptable y consultable

    [:octicons-arrow-right-24: Referencia](#)

-   :material-format-font:{ .lg .middle } __Hecho a medida__

    ---

    Cambia los colores, fuentes, lenguaje, íconos, logo  y más con unas pocas líneas

    [:octicons-arrow-right-24: Personalización](#)

-   :material-scale-balance:{ .lg .middle } __Código abierto, MIT__

    ---

    Material for MkDocs se distribuye bajo licencia MIT y está disponible en [GitHub](https://github.com/squidfunk/mkdocs-material)

    [:octicons-arrow-right-24: Licencia](#)

</div>

El resultado queda así:

  • Instala en 5 minutos

    Instala mkdocs-material con pip y ejecuta en minutos

    Comenzando

  • Es sólo Markdown

    Enfóquese en su contenido y genere un sitio estático adaptable y consultable

    Referencia

  • Hecho a medida

    Cambia los colores, fuentes, lenguaje, íconos, logo y más con unas pocas líneas

    Personalización

  • Código abierto, MIT

    Material for MkDocs se distribuye bajo licencia MIT y está disponible en GitHub

    Licencia

Sintaxis de bloques

Con la clase CSS card se pueden crear bloques de contenido. De estas se puede anular la animación anteponiendo el símbolo >

Tarjetas (cards)
<div class="grid" markdown>

:fontawesome-brands-html5: __HTML__ para contenido y estructura
{ .card }

:fontawesome-brands-js: __JavaScript__  para interactividad
{ .card }

:fontawesome-brands-css3: __CSS__ para configurar estilos
{ .card }

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... para qué?

</div>

Así se ven las tarjetas creadas:

HTML para contenido y estructura

JavaScript para interactividad

CSS para configurar estilos

Internet Explorer ... para qué?

Grillas genéricas

Las grids permiten englobar con facilidad contenidos distintos. En el ejemplo, se adjuntan dos bloques: uno se ubica a la izquierda y contiene pestañas con listas, mientras el otro contiene el código del bloque izquierdo y se ubica a la derecha.

Grillas genéricas
    <div class="grid" markdown>

    <!--  Bloque izquierdo: pestañas -->
    === "Lista desordenada"
            * Inciso A
            * Inciso B
            * Inciso C

    === "Lista ordenada"
        1. Primero
        2. Segundo
        3. Tercero

    <!-- Bloque derecho: bloque de código -->
    ```md title="Contenido de pestañas"
    === "Lista desordenada"
        * Inciso A
        * Inciso B
        * Inciso C

    === "Lista ordenada"
        1. Primero
        2. Segundo
        3. Tercero
    ```

    </div>
El resultado es el siguiente:

  • Inciso A
  • Inciso B
  • Inciso C
  1. Primero
  2. Segundo
  3. Tercero
Contenido de pestañas
=== "Lista desordenada"
    * Inciso A
    * Inciso B
    * Inciso C

=== "Lista ordenada"
    1. Primero
    2. Segundo
    3. Tercero

Referencias

Sitio oficial - Grids