Tile-grid

Jump To:

Creates a CSS grid with items that have matching aspect ratios. Reflows to fit as many items as can be fit withing current grid's width by default. Allows passing static styles to create fixed number of columns per row. Static styles are set adaptively and can adjust the number of columns at different breakpoints.

Demos

Basic Tile Grid (Reflowable)

A grid of tiles that automatically reflows to fit as many items as possible based on a preferred minimum width.

Tile 1

Tile 2

Tile 3

Tile 4

Tile 5

<div class="tile-grid">
  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 1</div>
  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 2</div>
  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 3</div>
  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 4</div>
  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 5</div>
</div>

Static Column Grid

Using the `tile-grid--static` modifier to enforce a specific number of columns that adapt per breakpoint (e.g., 2 on small, 3 on medium).

Static 1

Static 2

Static 3

Static 4

<div class="tile-grid tile-grid--static">
  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 1</div>
  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 2</div>
  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 3</div>
  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 4</div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "aspect-ratio" : list.slash(4, 3),
  "gap" : 1rem,
  "width" : 10em,
);

File Information

File: _tile-grid.scss
Group: tile-grid
Type: variable
Lines (comments): 14-18
Lines (code): 20-24

Map Properties

Name	Type	Default	Description
aspect-ratio	CssValue	list.slash(4, 3)
gap	Number	1rem	The gap for the tile grid.
width	Number	10em

$sizes

Variable Type: Map

Alternate Sizes for reflowable grid

Map of preferred width for columns and optional aspect-ratio for item

$sizes: (
  "large" : (
    "width" : 20em,
  )
);

File Information

File: _tile-grid.scss
Group: tile-grid
Type: variable
Lines (comments): 26-28
Lines (code): 30-34

$static-sizes

Variable Type: Map

Static grid width styles

$static-sizes: (
  "static" : (
    "default" : (
      "columns" : 1,
      "gap" : null,
      "aspect-ratio" : list.slash(4, 3)
    ),
    "small" : (
      "direction" : "min",
      "columns" : 2,
      "gap" : null,
    ),
    "medium" : (
      "direction" : "min",
      "columns" : 3,
      "gap" : null,
    ),
  ),
  "static-wide" : (
    "default" : (
      "columns" : 1,
      "gap" : null,
      "aspect-ratio" : list.slash(4, 3)
    ),
    "small" : (
      "direction" : "min",
      "columns" : 2,
      "gap" : null,
    ),
  )
);

File Information

File: _tile-grid.scss
Group: tile-grid
Type: variable
Lines (comments): 36-37
Lines (code): 39-69

Mixins

set()

Mixin

Change modules $config

File Information

File: _tile-grid.scss
Group: tile-grid
Type: mixin
Lines (comments): 71-74
Lines (code): 76-78

Examples

@include ulu.component-tile-grid-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

set-static()

Mixin

Set fixed sizes map

File Information

File: _tile-grid.scss
Group: tile-grid
Type: mixin
Lines (comments): 80-82
Lines (code): 84-86

Parameters

Name	Type	Description
$changes	`Map`	Map of changes
$merge-mode	`String`	Merge mode see utils.map-merge() [null

Require

$static-sizes

set-sizes()

Mixin

Set sizes map

File Information

File: _tile-grid.scss
Group: tile-grid
Type: mixin
Lines (comments): 88-90
Lines (code): 92-94

Parameters

Name	Type	Description
$changes	`Map`	Map of changes
$merge-mode	`String`	Merge mode see utils.map-merge() [null

Require

$sizes

styles()

Mixin

Output component stylesheet

File Information

File: _tile-grid.scss
Group: tile-grid
Type: mixin
Lines (comments): 105-107
Lines (code): 109-171

Examples

@include ulu.component-tile-grid-styles();

Require

Functions

get()

Function

Get a config option

File Information

File: _tile-grid.scss
Group: tile-grid
Type: function
Lines (comments): 96-99
Lines (code): 101-103

Examples

@include ulu.component-tile-grid-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config