{"id":13426534,"url":"https://github.com/sylvainpolletvillard/postcss-grid-kiss","last_synced_at":"2025-05-15T12:06:26.318Z","repository":{"id":41435437,"uuid":"73853896","full_name":"sylvainpolletvillard/postcss-grid-kiss","owner":"sylvainpolletvillard","description":"A PostCSS plugin to keep CSS grids stupidly simple","archived":false,"fork":false,"pushed_at":"2023-10-07T01:50:15.000Z","size":4370,"stargazers_count":1322,"open_issues_count":4,"forks_count":52,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-12T05:06:55.607Z","etag":null,"topics":["ascii-art","css","grids","kiss","layout","postcss","visual"],"latest_commit_sha":null,"homepage":"https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylvainpolletvillard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-15T20:48:39.000Z","updated_at":"2025-04-03T20:13:26.000Z","dependencies_parsed_at":"2022-09-26T21:20:46.562Z","dependency_job_id":"b5fb69b9-93a7-4216-9cf8-ff0bf92b310f","html_url":"https://github.com/sylvainpolletvillard/postcss-grid-kiss","commit_stats":{"total_commits":223,"total_committers":4,"mean_commits":55.75,"dds":"0.11659192825112108","last_synced_commit":"b29f2ddf18f5b6de62b5455346582c4d93eb3b35"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainpolletvillard%2Fpostcss-grid-kiss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainpolletvillard%2Fpostcss-grid-kiss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainpolletvillard%2Fpostcss-grid-kiss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvainpolletvillard%2Fpostcss-grid-kiss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylvainpolletvillard","download_url":"https://codeload.github.com/sylvainpolletvillard/postcss-grid-kiss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337613,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ascii-art","css","grids","kiss","layout","postcss","visual"],"created_at":"2024-07-31T00:01:37.230Z","updated_at":"2025-05-15T12:06:21.305Z","avatar_url":"https://github.com/sylvainpolletvillard.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# grid-kiss: Keep CSS Grids simple, stupid\n\nThis is a [PostCSS][postcss-website] plugin aiming to replace the 24 new properties brought by [CSS Grids][w3c-spec] with a single one that you immediately understand when you see it.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-grid-kiss\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/postcss-grid-kiss.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-grid-kiss\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/postcss-grid-kiss.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/sylvainpolletvillard/postcss-grid-kiss\"\u003e\u003cimg src=\"https://travis-ci.org/sylvainpolletvillard/postcss-grid-kiss.svg?branch=master\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-grid-kiss\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/postcss-grid-kiss.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://gitter.im/sylvainpolletvillard/postcss-grid-kiss?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\"\u003e\u003cimg src=\"https://badges.gitter.im/sylvainpolletvillard/postcss-grid-kiss.svg\" alt=\"Discuss about this project on gitter\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n* [Examples](#examples)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Fallback](#fallback-for-older-browsers)\n* [Options](#options)\n* [Alternative styles](#alternative-styles)\n* [Documentation](#documentation)\n  - [How to draw a grid](#how-to-draw-a-grid)\n  - [Values accepted for selectors](#values-accepted-for-selectors)\n  - [Dimensions of rows](#dimensions-of-rows)\n  - [Dimensions of columns](#dimensions-of-columns)\n  - [Dimensions of gaps](#dimensions-of-gaps)\n  - [Values accepted for dimensions](#values-accepted-for-dimensions)\n  - [Horizontal alignment of the grid](#horizontal-alignment-of-the-grid)\n  - [Vertical alignment of the grid](#vertical-alignment-of-the-grid)\n  - [Horizontal alignment inside a zone](#horizontal-alignment-inside-a-zone)\n  - [Vertical alignment inside a zone](#vertical-alignment-inside-a-zone)\n\n## Examples\n\n### [Try it online][playground]\n\nTry the different examples and play with the plugin on the [playground][playground]. Edit the CSS and HTML on the left and the grid will be updated instantly.\n\n### Basic website layout\n\n```css\nbody {\n\tgrid-kiss:\n\t\t\"+-------------------------------+      \"\n\t\t\"|           header ↑            | 120px\"\n\t\t\"+-------------------------------+      \"\n\t\t\"                                       \"\n\t\t\"+-- 30% ---+  +--- auto --------+      \"\n\t\t\"| .sidebar |  |       main      | auto \"\n\t\t\"+----------+  +-----------------+      \"\n\t\t\"                                       \"\n\t\t\"+-------------------------------+      \"\n\t\t\"|              ↓                | 60px \"\n\t\t\"|         → footer ←            |      \"\n\t\t\"+-------------------------------+      \"\n}\n```\n\nis converted to:\n\n```css\nbody \u003e header {\n\tgrid-area: header;\n\talign-self: start;\n}\n\nbody \u003e .sidebar {\n\tgrid-area: sidebar;\n}\n\nbody \u003e main {\n\tgrid-area: main;\n}\n\nbody \u003e footer {\n\tgrid-area: footer;\n\tjustify-self: center;\n\talign-self: end;\n}\n\nbody {\n\tdisplay: grid;\n\talign-content: space-between;\n\tgrid-template-rows: 120px 1fr 60px;\n\tgrid-template-columns: 30% 1fr;\n\tgrid-template-areas:\n\t\t\"header  header\"\n\t\t\"sidebar main  \"\n\t\t\"footer  footer\";\n}\n```\n\nwhich displays this kind of grid layout:\n\n![example-result](https://cloud.githubusercontent.com/assets/566536/23096165/41d569d4-f617-11e6-92b3-532b20e750c8.png)\n\n### Responsive layouts\n\nUse different `grid-kiss` declarations in media queries to easily get responsive layouts. It is recommended to start by the grid on small screens, then use media queries to progressively enhance your layouts on wider screens.\n\n![responsive-layout](https://cloud.githubusercontent.com/assets/566536/23096187/4217359e-f617-11e6-8917-4edb017c3cda.png)\n\n## Installation\n\n- with [npm](https://www.npmjs.com/)\n\n```bash\nnpm install postcss-grid-kiss --save-dev\n```\n\n- with [yarn](https://yarnpkg.com/)\n\n```bash\nyarn add postcss-grid-kiss --dev\n```\n\n## Usage\n\nIf you never used PostCSS before, read [PostCSS usage documentation](https://github.com/postcss/postcss#usage) first.\n\n- with command line interface :\n\n```bash\npostcss src/your.css --output dist/compiled.css --use postcss-grid-kiss\n```\n\n- with Node:\n\n```js\nconst postcss  = require('postcss'),\n      gridkiss = require('postcss-grid-kiss');\n\npostcss([ gridkiss ])\n    .process(css, { from: 'src/your.css', to: 'compiled.css' })\n    .then(function (result) {\n        fs.writeFileSync('compiled.css', result.css);\n        if( result.map ) fs.writeFileSync('compiled.css.map', result.map);\n    });\n```\n\nRead PostCSS documentation to make it work with Webpack, Gulp or your other build system.\n\n## Fallback for older browsers\n\n[CSS Grid Layout][w3c-spec] is a W3C Candidate Recommandation supported in all the evergreen browsers. It is available in Chrome 57, Firefox 52, Safari 10.1, Edge 16 and Opera 44. It is also supported on mobile iOS Safari and Chrome for Android. See [Can I Use][can-i-use] for more information on browser support.\n\nFor browsers not supporting CSS Grid Layout, Grid-kiss proposes a *fallback* that use absolute positionning and `calc()` operator. It uses a `@supports` query to only apply on non-supported browsers, and does not involve JavaScript.\n\n**With this fallback, Grid-kiss layouts will work on any browser supporting `calc()`, which is like [95% of browsers](http://caniuse.com/#search=calc).** But you should note that a fallback based on absolute positionning has some limitations:\n\n- It is only a fallback for `grid-kiss` declarations. The reason this fallback works is because of the constraints designed by purpose for grid-kiss layouts. Other Grid Layout properties such as `grid-gap` are not covered by this fallback.\n- New dimensions properties defined in the Grid layout specification such as `min-content`, `max-content`, `minmax()`, `fit-content` also are not supported\n- Zones with `position: absolute` are out of the flow. This implies that the container will no longer resize based on the zones content. Grid-kiss tries to calculate the total size of the grid when possible. If one of the rows/columns dimensions is `auto` or a fraction of the remaining space (`fr`), the height/width is set to `100%`.\n- Grid-kiss adds the property `box-sizing: border-box` to each zone so that they don't overlap because of their padding or border size. If you don't already use this property, it may change a bit the zones dimensions.\n- The CSS output is significally bigger, between 2x and 3x in size depending on the targeted browsers\n\nInternet Explorer does not support `@supports` 🙄 , so Grid-kiss needs to add another media query hack that is known to run only on IE: `@media screen and (min-width:0\\0)`. This extends support from **IE9 to IE11** at the cost of a bigger output size. If you don't care about Internet Explorer support and want to reduce the output size, you should omit IE in your [browserslist][browserslist].\n\nBy default, Grid-kiss is looking in your [browserslist][browserslist] config for the list of supported browsers and automatically deduce what fallbacks are needed for your project by using [Can I Use data][can-i-use]. You can override this automatic detection with the `fallback` option explained below.\n\n## Options\n\nGrid-kiss comes with a few options:\n\n```javascript\npostcss([ gridkiss({ ...options }) ])\n```\n\n### `fallback` : add fallback for browsers not supporting CSS Grid Layout\n\n**Note: it is recommended to use automatic detection through browserslist instead of using this option. See [Fallback](#fallback-for-older-browsers) section.**\n\nIf this option is provided, it overrides automatic detection and tells explicitely whether to add or not the fallback styles to the output.\n\n```javascript\npostcss([ gridkiss({ fallback: true }) ]) // always add all fallbacks\npostcss([ gridkiss({ fallback: false }) ]) // never add any fallback\n```\n\n### `optimize` - reduce output size\n\nThis option *(enabled by default)* reduces the size of the output while keeping it readable. It does so by merging grid properties and renaming zone identifiers. For complete minification, use it with [cssnano](http://cssnano.co/).\n\nSet this option to `false` if you prefer a more verbose and descriptive output. Try to toggle the option in the [playground][playground] to compare the outputs.\n\n```javascript\npostcss([ gridkiss({ optimize: false }) ])\n```\n\n### `selectorParser` - apply custom transforms to zone selectors\n\nThis option receives a function that is applied on the selectors you wrote in the zones. This is useful to add your own transforms or selector syntax, for example to use component names in a component-based framework like Vue or React.\n\n```javascript\npostcss([\n  gridkiss({\n    selectorParser: function (selector) {\n      if (/[A-Z]/.test(selector[0])) {\n        return `[data-component-name='${selector}']`\n      }\n      return selector\n    }\n  })\n])\n ```\n\n## Alternative styles\n\nThese alternative styles for zone syntax are also supported :\n\n - `┌ ┐ └ ┘` for corners and `│ ─` for segments\n\n ```css\n div {\n \tgrid-kiss:\n \t\"┌──────┐  ┌──────┐         \"\n \t\"│      │  │  ↑   │         \"\n \t\"│      │  │ bar →│  200px  \"\n \t\"│  ↓   │  └──────┘         \"\n \t\"│ baz  │              -    \"\n \t\"│  ↑   │  ┌──────┐         \"\n \t\"│      │  │  ↑   │  200px  \"\n \t\"└──────┘  │      │         \"\n \t\"          │ foo  │    -    \"\n \t\"┌──────┐  │      │         \"\n \t\"│ qux  │  │  ↓   │  200px  \"\n \t\"│  ↓   │  │      │         \"\n \t\"└─20em─┘  └──────┘         \"\n }\n ```\n\n - `╔ ╗ ╚ ╝` for corners and `║ ═` for segments\n\n ```css\n main {\n \tgrid-kiss:\n \t\"╔═══════╗  ╔════════════════╗      \"\n \t\"║       ║  ║    .article    ║ auto \"\n \t\"║   ↑   ║  ╚════════════════╝      \"\n \t\"║  nav  ║  ╔════╗  ╔════════╗      \"\n \t\"║       ║  ║    ║  ║ aside →║ 240px\"\n \t\"╚═ 25% ═╝  ╚════╝  ╚═ 80em ═╝      \"\n }\n ```\n\n## Documentation\n\n### How to draw a grid\n\n- Draw the different zones of your grid as shown in the example. You can use some tools like [AsciiFlow](http://asciiflow.com/).\n- Inside every zone, write a selector that matches the corresponding element. See [Values accepted for selectors](#values-accepted-for-selectors)\n- The elements matched have to be **direct descendants** of the grid element\n- Separate each row by a newline (`\\n`) and give the same indentation level to every row\n- Make sure each row starts and end by a double quote `\"`\n- Make sure the zone corners (`+`) are correctly aligned. Every index in the rows where a corner character is found creates a new column.\n- Do not hesitate to make large zones with unused space, it may be useful for future modifications\n- Use Insert. key and Multi-cursor if supported by your editor to draw and edit your grids easily\n\n### Values accepted for selectors\n\nInside each zone, you can write a selector to associate a zone to a DOM element. It can be a `tag` name, a `.class`, an `#id`, or `any.other[valid]#selector`.\n\nSince v1.2.0, selectors in zones may use some shortened notations specific to grid-kiss, although using a class is still the recommended method.\n\n- `:1` ⇒ `*:nth-child(1)`\n- `button:2` ⇒ `button:nth-of-type(2)`\n\nSince v1.4.0, you can also apply custom transforms and make your own syntax with the `selectorParser` [option](#options)\n\n### Dimensions of rows\n\nDeclare the size of a row by writing the dimension **just after the last column of the grid**\n\n```\n+------+  +------+ ---\n|  ^   |  | .bar | 40em\n|      |  +------+ ---\n| .baz |\n|      |  +------+ ---\n|  v   |  |  ^   | 38em\n+------+  |      | ---\n          | .foo |\n+------+  |      | ---\n| .qux |  |  v   | 40em\n+------+  +------+ ---\n```\n\nThe `-` separators between dimensions are not mandatory, they are only here to make the grid more readable.\n\n### Dimensions of columns\n\nDeclare the size of a column by writing the dimension **inside the top or bottom border of a zone**:\n\n```\n+-- 640px --+      +----------+\n|  selector |  or  | selector |\n+-----------+      +---30%----+\n```\n\nYou cannot set the width of a zone occupying more than one column. This would imply some calculations that may or may not have a solution. As an alternative, you can declare the size of a column **just after the last row of the grid**:\n\n```\n+-------------+ +-----+        +-------------+ +-20%-+\n|  .bigzone   | |     |        |  .bigzone   | |     |\n+-------------+ +-----+        +-------------+ +-----+\n+-----+ +-------------+   or   +-----+ +-------------+\n|     | |  .bigzone2  |        |     | |  .bigzone2  |\n+-----+ +-------------+        +-20%-+ +-------------+\n| 20% | | 60% | | 20% |                | 60% |\n```\n\nThe `|` separators between dimensions are not mandatory, they are only here to make the grid more readable.\n\n### Dimensions of gaps\n\nYou can also declare the dimension of spacing between zones the same way you do with rows and columns. These spaces are called _gaps_ and act like empty zones. The example below defines gaps of _50px_.\n\n```\n+-----+      +-----+      +-----+  ----\n| .nw |      | .n  |      | .ne | 100px\n+-----+      +-----+      +-----+  ----\n                                   50px\n+-----+      +-----+      +-----+  ----\n| .w  |      |     |      | .e  | 100px\n+-----+      +-----+      +-----+  ----\n                                   50px\n+-----+      +-----+      +-----+  ----\n| .sw |      | .s  |      | .se | 100px\n+-----+      +-----+      +-----+  ----\n|100px| 50px |100px| 50px |100px|\n```\n\n### Values accepted for dimensions\n\nDimensions can be any of the specified values:\n\n- a non-negative length.\n  - `15px`\n  - `4rem`\n\n- a non-negative percentage value, optionally with a context keyword\n  - `20%`\n  - `25% free` ⇒ `25fr`\n  - `30% grid` ⇒ `30%`\n  - `5% view` ⇒ `5vw` or `5vh` depending on the direction\n\n- a non-negative number representing a fraction of the free space in the grid container.\n  - `5` ⇒ `5fr`\n\n- `max` or `max-content`: a keyword representing the largest maximal content contribution of the grid items occupying the grid track\n\n- `min` or `min-content`: a keyword representing the largest minimal content contribution of the grid items occupying the grid track\n\n- a range between a minimum and a maximum or `minmax(min, max)`\n  - `100px - 200px` ⇒ `minmax(100px, 200px)`\n\n- `\u003e *length*` or `\u003c *length*`: a minimum or maximum value\n  - `\u003e 100px` ⇒ `minmax(100px, auto)`\n  - `\u003c 50%` ⇒ `minmax(auto, 50%)`\n\n- `fit *length*` or `fit-content(*length*)`: a keyword representing the formula min(max-content, max(auto, *length*)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument *length* if it is greater than the auto minimum.\n  - `fit 100px` ⇒ `fit-content(100px)`\n\n- `calc( expr )` : an expression using native [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) CSS function\n\n- `var(--name)` : a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var) interpolation\n\n- `auto`:  a keyword representing one part of the remaining free space, i.e. `1fr`. When used as a maximum value, it is equal to `max-content`. When used as a minimum value,  it it is equal to `min-content`.\n\nWhen no value is specified, row and column sizes are set as `auto`.\n\nSince v2.5.0, you can also apply custom transforms and make your own syntax with the `dimensionParser` [option](#options)\n\n### Horizontal alignment of the grid\n\nSpecifies how all the zones are aligned horizontally inside the grid container. Irrelevant if one of the zones fits all the remaining free space.\n\n- `justify-content: stretch`\nwhen there are no two consecutive spaces at the beginning or the end of the rows\n\n```\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n```\n\n![grid-justify-content-stretch](https://cloud.githubusercontent.com/assets/566536/23096183/4211e616-f617-11e6-9819-701ef3958093.png)\n\n- `justify-content: start`\nwhen there are two consecutive spaces or more at the end of the rows\n\n```\n\"+---+ +---+ +---+    \"\n\"| a | | b | | c |    \"\n\"+---+ +---+ +---+    \"\n\"+---+ +---+ +---+    \"\n\"| d | | e | | f |    \"\n\"+---+ +---+ +---+    \"\n\"+---+ +---+ +---+    \"\n\"| g | | h | | i |    \"\n\"+---+ +---+ +---+    \"\n```\n\n![grid-justify-content-start](https://cloud.githubusercontent.com/assets/566536/23096182/4203ebd8-f617-11e6-8972-1ee145bb8359.png)\n\n- `justify-content: end`\n\nwhen there are two consecutive spaces or more at the beginning of the rows\n\n```\n\"    +---+ +---+ +---+\"\n\"    | a | | b | | c |\"\n\"    +---+ +---+ +---+\"\n\"    +---+ +---+ +---+\"\n\"    | d | | e | | f |\"\n\"    +---+ +---+ +---+\"\n\"    +---+ +---+ +---+\"\n\"    | g | | h | | i |\"\n\"    +---+ +---+ +---+\"\n```\n\n![grid-justify-content-end](https://cloud.githubusercontent.com/assets/566536/23096179/41fefe70-f617-11e6-9340-c53943440a44.png)\n\n- `justify-content: center`\nwhen there are two consecutive spaces or more at the beginning and the end of the rows\n\n```\n\"    +---+ +---+ +---+    \"\n\"    | a | | b | | c |    \"\n\"    +---+ +---+ +---+    \"\n\"    +---+ +---+ +---+    \"\n\"    | d | | e | | f |    \"\n\"    +---+ +---+ +---+    \"\n\"    +---+ +---+ +---+    \"\n\"    | g | | h | | i |    \"\n\"    +---+ +---+ +---+    \"\n```\n\n![grid-justify-content-center](https://cloud.githubusercontent.com/assets/566536/23096177/41fe1078-f617-11e6-94b3-446296152dfc.png)\n\n- `justify-content: space-between`\nwhen there are two consecutive spaces or more between zones\n\n```\n\"+---+    +---+    +---+\"\n\"| a |    | b |    | c |\"\n\"+---+    +---+    +---+\"\n\"+---+    +---+    +---+\"\n\"| d |    | e |    | f |\"\n\"+---+    +---+    +---+\"\n\"+---+    +---+    +---+\"\n\"| g |    | h |    | i |\"\n\"+---+    +---+    +---+\"\n```\n\n![grid-justify-content-space-between](https://cloud.githubusercontent.com/assets/566536/23096180/41ffe254-f617-11e6-8caf-2a4cc2ca467b.png)\n\n- `justify-content: space-evenly`\nwhen there are two consecutive spaces or more at the beginning and the end of the rows, and exactly two consecutive spaces between zones\n\n```\n\"    +---+  +---+  +---+    \"\n\"    | a |  | b |  | c |    \"\n\"    +---+  +---+  +---+    \"\n\"    +---+  +---+  +---+    \"\n\"    | d |  | e |  | f |    \"\n\"    +---+  +---+  +---+    \"\n\"    +---+  +---+  +---+    \"\n\"    | g |  | h |  | i |    \"\n\"    +---+  +---+  +---+    \"\n```\n\n![grid-justify-content-space-evenly](https://cloud.githubusercontent.com/assets/566536/23096181/4201ba70-f617-11e6-8b9a-5f86ca80b423.png)\n\n- `justify-content: space-around`\nwhen there are two consecutive spaces or more at the beginning and the end of the rows, and four consecutive spaces or more between zones\n\n```\n\"  +---+    +---+    +---+  \"\n\"  | a |    | b |    | c |  \"\n\"  +---+    +---+    +---+  \"\n\"  +---+    +---+    +---+  \"\n\"  | d |    | e |    | f |  \"\n\"  +---+    +---+    +---+  \"\n\"  +---+    +---+    +---+  \"\n\"  | g |    | h |    | i |  \"\n\"  +---+    +---+    +---+  \"\n```\n\n![grid-justify-content-space-around](https://cloud.githubusercontent.com/assets/566536/23096178/41febbea-f617-11e6-92aa-e68ef32e7d54.png)\n\n### Vertical alignment of the grid\n\nSpecifies how all the zones are aligned vertically inside the grid container. Irrelevant if one of the zones fits all the remaining free space.\n\n- `align content: stretch`\nwhen no space rows\n\n```\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n```\n\n![grid-align-content-stretch](https://cloud.githubusercontent.com/assets/566536/23096172/41e9bc04-f617-11e6-9de4-a0906fa68a7e.png)\n\n- `align-content: start`\nwhen at least one space row at the end\n\n```\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"                 \"\n```\n\n![grid-align-content-start](https://cloud.githubusercontent.com/assets/566536/23096171/41e983f6-f617-11e6-8e8c-89425ca2c76c.png)\n\n- `align-content: end`\nwhen at least one space row at the beginning\n\n```\n\"                 \"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n```\n\n![grid-align-content-end](https://cloud.githubusercontent.com/assets/566536/23096167/41d703e8-f617-11e6-928b-ef29645c132a.png)\n\n- `align-content: center`\nwhen at least one space row at the beginning and one space row at the end\n\n```\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n```\n\n![grid-align-content-center](https://cloud.githubusercontent.com/assets/566536/23096166/41d67752-f617-11e6-96c7-61f8ba81f4a9.png)\n\n- `align-content: space-between`\nwhen there is one space row between zones\n\n```\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n```\n\n![grid-align-content-space-between](https://cloud.githubusercontent.com/assets/566536/23096168/41d7ea74-f617-11e6-861a-963f87debf74.png)\n\n- `align-content: space-evenly`\nwhen there is one space row at the beginning, at the end and between zones\n\n```\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n```\n\n![grid-align-content-space-evenly](https://cloud.githubusercontent.com/assets/566536/23096169/41d855cc-f617-11e6-883d-712654b4d4b8.png)\n\n- `align-content: space-around`\nwhen there is one space row at the beginning and at the end, and two space rows between zones\n\n```\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| a | | b | | c |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| d | | e | | f |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n\"                 \"\n\"+---+ +---+ +---+\"\n\"| g | | h | | i |\"\n\"+---+ +---+ +---+\"\n\"                 \"\n```\n\n![grid-align-content-space-around](https://cloud.githubusercontent.com/assets/566536/23096170/41dc894e-f617-11e6-836f-ec22738413fd.png)\n\n### Horizontal alignment inside a zone\n\nEach zone can specify an alignment indicator. When no indicators are specified, defaults are stretch horizontally and vertically.\n\n- `justify-self: start` with `\u003c` or `←`\n\n```\n+-------------+    +-------------+\n| .item-a  \u003c  | or | .item-a  ←  |\n+-------------+    +-------------+\n```\n\n![grid-justify-self-start](https://cloud.githubusercontent.com/assets/566536/23096186/4213332c-f617-11e6-9fb1-13e46b932364.png)\n\n- `justify-self: end` with `\u003e` or `→`\n\n```\n+-------------+    +-------------+\n|  \u003e  .item-a | or |  →  .item-a |\n+-------------+    +-------------+\n```\n\n![grid-justify-self-end](https://cloud.githubusercontent.com/assets/566536/23096185/42121c8a-f617-11e6-830d-2be797b6c71a.png)\n\n- `justify-self: stretch` with `\u003c` and `\u003e` or `←` and `→` in this order\n\n```\n+--------------+    +--------------+\n| \u003c .item-a  \u003e | or | ← .item-a  → |\n+--------------+    +--------------+\n```\n\n![grid-justify-self-stretch](https://cloud.githubusercontent.com/assets/566536/23096188/42182026-f617-11e6-9ee0-8f43f2065562.png)\n\n- `justify-self: center` with `\u003e` and `\u003c` or `→` and `←` in this order\n\n```\n+--------------+    +--------------+\n| \u003e .item-a  \u003c | or | → .item-a  ← |\n+--------------+    +--------------+\n```\n\n![grid-justify-self-center](https://cloud.githubusercontent.com/assets/566536/23096184/4211f75a-f617-11e6-9f7c-0e2a5dc959e7.png)\n\n### Vertical alignment inside a zone\n\n- `align-self: start` with `^` or `↑`\n\n```\n+-------------+    +-------------+\n|   .item-a   | or |   .item-a   |\n|      ^      |    |      ↑      |\n+-------------+    +-------------+\n```\n\n![grid-align-self-start](https://cloud.githubusercontent.com/assets/566536/23096175/41ecd68c-f617-11e6-91bb-37789cd16c32.png)\n\n- `align-self: end` with `v` or `↓`\n\n```\n+-------------+    +-------------+\n|      v      | or |      ↓      |\n|   .item-a   |    |   .item-a   |\n+-------------+    +-------------+\n```\n\n![grid-align-self-end](https://cloud.githubusercontent.com/assets/566536/23096174/41ebf460-f617-11e6-9f6a-70c7ea8e4c1f.png)\n\n- `align-self: stretch` with `^` and `v` or `↑` and `↓` in this order\n\n```\n+-------------+    +-------------+\n|      ^      |    |      ↑      |\n|   .item-a   | or |   .item-a   |\n|      v      |    |      ↓      |\n+-------------+    +-------------+\n```\n\n![grid-align-self-stretch](https://cloud.githubusercontent.com/assets/566536/23096176/41f05fa0-f617-11e6-8841-f353256e0b3a.png)\n\n- `align-self: center` with `v` and `^` or `↓` and `↑` in this order\n\n```\n+-------------+    +-------------+\n|      v      |    |      ↓      |\n|   .item-a   | or |   .item-a   |\n|      ^      |    |      ↑      |\n+-------------+    +-------------+\n```\n\n![grid-align-self-center](https://cloud.githubusercontent.com/assets/566536/23096173/41eaf966-f617-11e6-91c1-251888ee903b.png)\n\nNew lines and position of alignement characters do not matter. Just make it visually understandable.\n\n### Usage with Prettier formatter\n\nPeople using [Prettier](https://prettier.io) code formatter may have issues with the automatic formating of `grid-kiss` declarations. In that case, write `grid-template-kiss` instead of `grid-kiss`. For some reason, Prettier correctly formats the declarations starting with `grid-template-***`.\n\n---\n\n![Sketchnote](https://user-images.githubusercontent.com/566536/52332976-553bf180-29fc-11e9-9578-8365ae7eee1b.jpg)\n\n---\n\nCredits for images : [CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/), [@aneveux](https://github.com/aneveux/)\n\n[playground]: https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html\n[codepen]: http://codepen.io/sylvainpv/pen/oBxKWg\n[postcss-website]: http://postcss.org/\n[w3c-spec]: https://www.w3.org/TR/css-grid-1/\n[can-i-use]: http://caniuse.com/#feat=css-grid\n[browserslist]: https://github.com/ai/browserslist\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvainpolletvillard%2Fpostcss-grid-kiss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvainpolletvillard%2Fpostcss-grid-kiss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvainpolletvillard%2Fpostcss-grid-kiss/lists"}