NPM or Yarn
From the root of your project, install
hgrid-css as a dev dependency:
$ npm i hgrid-css -D
$ yarn add hgrid-css --dev
// React: $ npm i sass -D // Vue:$ npm i sass sass-loader -D // Note that `node-sass` is deprecated. We use `sass` instead.
Check the detailed integration documentation on how to make hgrid work seamlessly with React, Vue, Nuxt, Svelte, Eleventy and Astro.
<!-- Without CSS grid utilities (slimmer) --> https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css <!-- Including CSS grid utilities (heavier) --> https://unpkg.com/hgrid-css@latest/dist/hgrid.grid.min.css
Include the link to one of the precompiled hgrid kits from CDN, or a local copy, before any other stylesheets in your html.
<link rel="stylesheet" href="https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css"> <!-- more css -->
You can also
@import it at the top of your local stylesheet:
/* From node_modules */@import './../../node_modules/hgrid-css/dist/hgrid.min.css'; /* From CDN */@import 'https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css';
You can now customize hgrid anywhere after the import in the code flow, by overwriting its CSS utilities or custom properties with your own.
Bake your own
Note: If your project is Node.js driven, read this instead: How to integrate hgrid as a module.
$ git clone https://github.com/ahansson/hgrid-css.git
With the source code you can modify or extend hgrid to fit your needs, regardless of whether you use Node or
not. If you don't use Node.js, you can't use the included Sass complation locally, so you'll have to use the
precompiled CSS from the
hgrid-css/dist/ folder, or install an editor plugin such as
Live Sass Compiler.
2. Install Packages
If you do have Node.js installed,
cd into the
hgrid-css/ folder and run
This will set up what you need to compile Sass locally.
3. Watch for Changes
npm run watch to listen for changes to files in the
sass/ directory and output it as CSS in
4. Modify the Output
Use variables to switch off animations or CSS grid in order to reduce the output size.
Add to, remove from, or edit the entry file
sass/hgrid.scss if you want to modify the final build.
Adding your own custom
.scss partials to the
sass/* directory is a quick and dirty way to modify
hgrid. If you prefer to keep things cleaner, refer to the integration
article for detailed recipes.
5. Build Production Files
npm run build to prefix, minify and
output these CSS files to
hgrid.css.map(source map for hgrid.css)
hgrid.min.css.map(source map for hgrid.min.css)
The build can (and should) be further optimized before going live. Read more about the recommended production build steps.
← Previous: About hgrid
Next: Variables →