Diseño mínimo de cuadrícula moderna systm en CSS puro-ráster

Vista prévia

Descripción

Raster es un sistema de diseño CSS puro que hace que sea fácil de generar un diseño de cuadrícula moderna responsive usando HTML descriptivo y CSS Grid layout .

See also:

• Top 10 diseños de cuadrícula responsive de JavaScript & CSS
• 10 mejor diseño de cuadrícula plugins de jQuery

Funcionamiento

Descargue e importe la hoja de estilo Grid. CSS en el documento HTML.

<link rel="stylesheet" href="grid.css">

Cree un elemento Grid y especifique el número de columnas en las columnas atributos:

• columnas-s: el número de columnas en pantallas pequeñas
• columnas: el número de columnas en las pantallas de tamaño mediano
• Columns-l: el número de columnas en pantallas grandes

<grid columns-s=1 columns=2 columns-l=3>


</grid>

Inserte celdas en el diseño y especifique el número de columnas que abarca la celda utilizando el atributo span :

• span = 6: 6 columnas
• span = 11-16: se inicia en la columna 11, finaliza en la columna 16
• span = 2 + 4: se inicia en la columna 2, abarca 4 columnas.
• span = 6..: se inicia en la columna 6, abarca el resto de la fila
• span = Row: abarcan una fila completa

<grid columns="16">

<c>1</c><c>2</c><c>3</c><c>4</c><c>5</c><c>6</c><c>7</c><c>8</c>

<c>9</c><c>10</c><c>11</c><c>12</c><c>13</c><c>14</c><c>15</c><c>16</c>

<c></c>

<c span=6>6</c>

<c></c>

<c span=11-16>11-16</c>

<c span=2+4>2+4</c>

<c span=6-14>6-14</c>

<c span=1-4>1-4</c>

<c span=6..>6..</c>

<c span=4..>4..</c>

<c span=8..>8..</c>

<c span=4-10>4-5</c>
</grid>

Registro de cambios

03/02/2019

• v6