The purpose of this component is to have a really solid reusable grid component that can be utilised across multiple projects

Install the project:

npm install -D @kevincoyle/kc-grid

Import the component into your project:

import "@kevincoyle/kc-grid";

Then in your HTML you can use the <kc-grid> component:

<kc-grid>
  <div>Your content</div>
</kc-grid>

The default breakpoints are as follows:

These can be overridden by applying the appropriate breakpoint property to the component. For example:

<kc-grid smallmobilebreakpoint="200">
  <div>Content</div>
</kc-grid>

The component has the following variants available which can be specified by using the variant property on the component:

For example to add a 3 column grid you'd put into your html:

<kc-grid variant="1-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</kc-grid>

An optional layout container is provided so that your content can sit in the middle of the page. This is by default 100% of the breakpoint width.

A CSS custom property has been added to select the gap this is called --kc-grid-gap and can be set in css like so:

kc-grid {
  --kc-grid-gap: 20px;
}

This component should work on all modern browsers. Safari does not yet support Constructable Stylesheets which is required to add in the dynamic breakpoints so this has been added into the bundle.