<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
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
andposition != 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>