@stkao05/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.

Usage no npm install needed!

<script type="module">
  import stkao05LayoutGrid from 'https://cdn.skypack.dev/@stkao05/layout-grid';
</script>

README

<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

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

margin

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

offset

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

off

Hide the grid

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>