Press "Enter" to skip to content

Pure Block Grid Layout In Pure CSS | wall.css

Pure wall CSS block grid implementation with additional features. Another pure CSS app for a responsive, customizable wall grid layout system.

How to make use of it:

Install & Download.

# NPM
$ npm install @fabiocaccamo/wall.css --save

Import the wall.css library.

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

Add the CSS class wall to the grid item and specify the number of columns in the wall--cols-* attribute (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>

Set the facet ratio of grid objects within the .wall--ratio-* attribute. Possible values: 1-1 (Default)2-11-23-22-34-33-416-9.

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

Set the border radius of grid objects within the .wall--rounded-* attribute. Possible values: 0 (Default)12345678910152030.

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

Set the area between grid objects within the .wall--spacing-* attribute. Possible values: 0 (Default)123451015202530405060.

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

Breakpoints accessible:

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

Customize the wall.css by overriding the default variables within the 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
)

Neat Block Grid, wall CSS Plugin/Github


See Demo And Download

Official Website(fabiocaccamo): Click Here

This superior jQuery/javascript plugin is developed by fabiocaccamo. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *