Grids

Grids allow you to display content like image galleries or collections of data.

HTML

<div class="mdf-grid">
    <img src="1.jpg" alt="Image #1 description">
    <img src="2.jpg" alt="Image #2 description">
    <img src="3.jpg" alt="Image #3 description">
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/grid/styles';

// Configure appearance
@use '@miraidesigns/grid' with (
    $variable: value
);

@include grid.styles();

Examples

Some basic examples on how the module can be used.

Masonry grid

Masonry grids place the items as close to each other as possible making optimal use of the available vertical space.
The most common application would be for image galleries but can be used or any type of content.
Make sure to follow the example bellow and wrap your content in two <div> elements, mdf-grid__item and mdf-grid__item-content.

HTML

<div class="mdf-grid mdf-grid--masonry">
    <div class="mdf-grid__item">
        <div class="mdf-grid__item-content">
            <!-- Content -->
            <img src="1.jpg" alt="Image #1 description">
        </div>
    </div>
    <div class="mdf-grid__item">
        <div class="mdf-grid__item-content">
            <!-- Content -->
            <img src="2.jpg" alt="Image #2 description">
        </div>
    </div>
    <div class="mdf-grid__item">
        <div class="mdf-grid__item-content">
            <!-- Content -->
            <img src="3.jpg" alt="Image #3 description">
        </div>
    </div>
</div>

TypeScript

import { debounce } from '@miraidesigns/utils';
import { MDFGrid } from '@miraidesigns/grid';

const grid = new MDFGrid(document.querySelector('.mdf-grid'));
grid.resize();

// Update grid sizing whenever the browser window gets resized
window.addEventListener('resize', debounce(() => grid.resize(), 100));

Implementation

Classes

| Name | Type | Description | | ------------------------- | -------------- | ----------------------------------------------------------------------- | | mdf-grid | Parent | Contains the grid items. | | mdf-grid--masonry | Modifier | Prepare for masonry style grid | | mdf-grid--columns-* | Modifier | Set amount of columns. Number based on # of classes generated | | mdf-grid--rows-* | Modifier | Set amount of rows. Number based on # of classes generated | | mdf-grid--gap-* | Modifier | Set gap size. Value based on generated classes | | mdf-grid__item | Parent / Child | Grid item element, masonry only. Child to .mdf-grid | | mdf-grid__item--fade-in | Modifier | Fades-in the grid item, used by the masonry script | | mdf-grid__item-content | Parent / Child | Wrapper for grid item content, masonry only. Child to .mdf-grid__item |

Properties

| Name | Type | Description | | ------------------------- | -------------------------- | ---------------------------------------------------------- | | .container | (): HTMLElement | Returns the grid container element | | .items | (): HTMLElement | Returns an Array of all grid items | | .resize() | (): void | Resize all grid items | | .addItem(item, fadeIn?) | (Element, boolean): void | Resize the given item and optionally fade it in afterwards |