Neat Block Grid In Pure CSS – wall.css

Preview:

Description:

Yet another pure CSS implementation of the responsive, customizable block/wall grid layout system.

See also:

• 10 JavaScript & CSS Responsive Grid Layouts
• 10 Best jQuery/JavaScript Masonry layout Plugins
• 10 Best Grid Layout jQuery Plugins

How to use 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 aspect ratio of grid items in the .wall--ratio-* attribute. Possible values: 1-1 (Default), 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>

Set the border radius of grid items in the .wall--rounded-* attribute. Possible values: 0 (Default), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30.

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

Set the space between grid items in the .wall--spacing-* attribute. Possible values: 0 (Default), 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60.

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

Breakpoints available:

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

Changelog:

02/05/2023

• Migrate to modern sass.

03/07/2023

• Fix sass warnings.

04/13/2021

• Fixed direction css matrix.

11/30/2020

• Added hspacing and vspacing responsive modifiers.

05/10/2020

• Fixed font-size reset and vertical-align.

v0.1.1 (05/08/2020)

• Removed background-color from .wall-item-content

v0.1.0 (05/04/2020)

• Added public mixins aspect-ratio-container and aspect-ratio-content