<layout-grid>

<layout-grid> is a custom element that displays an overlaying grid on the page to allow you to layout your elements with more precision.

Demo

Usage

Load module

You can load the module from the CDN distribution with the script tag

<script src="https://cdn.jsdelivr.net/npm/@stkao05/layout-grid/src/index.js"></script>

Or you can import the npm module from your code

import "@stkao05/layout-grid";

Mockup

Create a <layout-grid> element in your page. By default, <layout-grid> element does not have width or height style set, so you need to specify its style explicitly for it to display properly on the page. You have the flexibility decide the layout grid placement and size.

Here is an example mock up of a full-screen 12 columns grid

<style type="text/css">
  layout-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
  }
</style>

<layout-grid
  color="rgb(0, 0, 0, 0.1)"
  type="columns"
  position="stretch"
  count="12"
  gutter="10px"
/>

Shortcut Support

You can toggle hide and show of grid with the shortcut ctrl + g. Enable shortcut support with the shortcut attribute.

<layout-grid shortcut />

Attributes

type

Type of grid, could be either a rows grid or a columns grid.

• Required
• Type: columns | rows.

count

Number of rows or columns

• Required
• Type: number

position

Placement of grid

• Required
• Type: top | top | bottom |left | right | center | stretch

gutter

Space between columns or rows

• Required
• Type: CSS length

width

Width of each column

• Required when type=columns' and position != stretch`
• Type: CSS length

height

Height of each row

• Required when type=rows and position != stretch
• Type: CSS length

color

Background color of the columns or rows.

• Optional, default set to rgba(256, 0, 0, 0.1)
• Type: CSS color

outline

Outline of columns or rows

• Optional. No outline style is set by default.
• Type: CSS outline value.

margin

The outter spacing of streched grid (position="stretch)

• Optional
• Type: CSS length

offset

Position offet of grid, used only when the grid position has one of the values: top, bottom, left, right

• Optional
• Type: CSS length

off

Hide the grid

• Optional
• Type: boolean attribute (present of attribute is true, false if absent)

shortcut

Activate shortcut support. Shortcut support allow you to show / hide the grid via ctrl + g

• Optional. No shortcut support is enabled by default
• Type: boolean attribute (present of attribute is true, false if absent)

<layout-grid shortcut></layout-grid>