<layout-grid>
is a custom element that displays an overlaying grid on the page to allow you to layout your elements with more precision.
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";
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"
/>
You can toggle hide and show of grid with the shortcut ctrl + g
. Enable shortcut support with the shortcut
attribute.
<layout-grid shortcut />
Type of grid, could be either a rows grid or a columns grid.
- Required
- Type:
columns
|rows
.
Number of rows or columns
- Required
- Type: number
Placement of grid
- Required
- Type:
top
|top
|bottom
|left
|right
|center
|stretch
Space between columns or rows
- Required
- Type: CSS length
Width of each column
- Required when
type=columns' and
position != stretch` - Type: CSS length
Height of each row
- Required when
type=rows
andposition != stretch
- Type: CSS length
Background color of the columns or rows.
- Optional, default set to
rgba(256, 0, 0, 0.1)
- Type: CSS color
Outline of columns or rows
- Optional. No outline style is set by default.
- Type: CSS outline value.
The outter spacing of streched grid (position="stretch
)
- Optional
- Type: CSS length
Position offet of grid, used only when the grid position
has one of the values: top
, bottom
, left
, right
- Optional
- Type: CSS length
Hide the grid
- Optional
- Type: boolean attribute (present of attribute is true, false if absent)
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>