Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including postcss-merge-grid-template with all npm packages installed. Try it out:

postcss-merge-grid-template lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

require("postcss/package.json"); // postcss is a peer dependency. // require("postcss-merge-grid-template/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-merge-grid-template v0.8.1

PostCSS plugin to reduce grid templates declarations

PostCSS Merge Grid Template Build Status

PostCSS plugin to reduce grid templates declarations.

#page {
    display: grid;
    width: 100%;
    height: 250px;
    grid-template-areas: "head head"
                         "nav  main"
                         "nav  foot";
    grid-template-rows: 50px 1fr 30px;
    grid-template-columns: 150px 1fr;
}
#page {
    display: grid;
    width: 100%;
    height: 250px;
    grid-template: "a a" 50px "b c" 1fr "b d" 30px / 150px 1fr;
}

Status: EXPERIMENTAL ☢️

☠ ☠ ☠ ☠ ☠ ☠ ☠

This plugin is still under development and does not currently cover all the possible places where zone identifiers can hide. That means it is likely to break your code by renaming half of the identifiers. Use it only if you know what you are doing.

Usage

postcss([ require('postcss-merge-grid-template') ])

See PostCSS docs for examples for your environment.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free