Cuadrícula ordenada de bloques en CSS puro-Wall. CSS

<link href="/path/to/css/wall.css" rel="stylesheet"/>

Agregue la clase CSS Wall al elemento Grid y especifique el número de columnas en el atributo Wall--cols-* (1-24).

<div class="wall wall--cols-6">

<div class="wall-col">


<div class="wall-item">



<a class="wall-item-content" href="#">




<span class="wall-item-content"></span>



</a>


</div>

</div>

<div class="wall-col">



<!-- ... -->

</div>

<div class="wall-col">



<!-- ... -->

</div>

<div class="wall-col">



<!-- ... -->

</div>
</div>

Establezca la relación de aspecto de los elementos de cuadrícula en el atributo . Wall--ratio-* . Valores posibles: 1-1 (por defecto) , 2-1 , 1-2 , 3-2 , 2-3 , 4-3 , 3-4 , 16-9 .

<div class="wall wall--cols-6 wall--ratio-3-2">

...
</div>

Establezca el radio de borde de los elementos de rejilla en el atributo . Wall--redondeado-* . Valores posibles: 0 (por defecto) , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 15 , 20 , 30 .

<div class="wall wall--cols-6 wall--rounded-5">

...
</div>

Establezca el espacio entre los elementos de la cuadrícula en el atributo . Wall--spacing-* . Valores posibles: 0 (por defecto) , 1 , 2 , 3 , 4 , 5 , 10 , 15 , 20 , 25 , 30 , 40 , 50 , 60 .

<div class="wall wall--cols-6 wall--spacing-10">

...
</div>

Puntos de interrupción disponibles:

• xs: 0
• SM: 576px
• MD: 768px
• LG: 992px
• XL: 1200px

<div class="wall wall--sm-cols-3 wall--md-cols-4 wall--lg-cols-5 wall--xl-cols-10">

...
</div>

Personalice el Wall. CSS reemplazando las variables predeterminadas en el Wall. SCSS .

$wall-columns: 24 !default;
$wall-ratio: ((1, 1), (2, 1), (1, 2), (3, 2), (2, 3), (4, 3), (3, 4), (16, 9)) !default;
$wall-rounded: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30 !default;
$wall-spacing: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60 !default;
$wall-breakpoints: (

xs: 0,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px
)