{"id":48275355,"url":"https://github.com/martenzander/postcss-mesh","last_synced_at":"2026-04-04T22:28:21.001Z","repository":{"id":57328204,"uuid":"90179956","full_name":"martenzander/postcss-mesh","owner":"martenzander","description":"Mesh – The powerful Grid System for PostCSS","archived":false,"fork":false,"pushed_at":"2019-07-13T10:39:17.000Z","size":771,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-05T02:52:03.156Z","etag":null,"topics":["column","grid","grid-layout","grid-system","gutter","layout","postcss","postcss-plugin","scss"],"latest_commit_sha":null,"homepage":"https://www.postcss-mesh.org","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/martenzander.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-03T18:20:30.000Z","updated_at":"2022-09-27T04:19:25.000Z","dependencies_parsed_at":"2022-08-23T15:02:38.167Z","dependency_job_id":null,"html_url":"https://github.com/martenzander/postcss-mesh","commit_stats":null,"previous_names":["slimmarten/postcss-mesh"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/martenzander/postcss-mesh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martenzander%2Fpostcss-mesh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martenzander%2Fpostcss-mesh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martenzander%2Fpostcss-mesh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martenzander%2Fpostcss-mesh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martenzander","download_url":"https://codeload.github.com/martenzander/postcss-mesh/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martenzander%2Fpostcss-mesh/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31416768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["column","grid","grid-layout","grid-system","gutter","layout","postcss","postcss-plugin","scss"],"created_at":"2026-04-04T22:28:20.370Z","updated_at":"2026-04-04T22:28:20.990Z","avatar_url":"https://github.com/martenzander.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://www.postcss-mesh.org\" rel=\"nofollow\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/logo.png\" align=\"center\"\u003e\u003c/a\u003e\n\u003ch3 align=\"center\"\u003e\nMesh\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\nThe powerful Grid System for \u003ca href=\"https://github.com/postcss/postcss\"\u003ePostCSS\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/postcss-mesh\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/postcss-mesh.svg\" alt=\"Slack\" data-canonical-src=\"https://img.shields.io/npm/v/postcss-mesh.svg\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/postcss-mesh\" rel=\"nofollow\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/postcss-mesh.svg\" alt=\"Slack\" data-canonical-src=\"https://img.shields.io/npm/dt/postcss-mesh.svg\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ch2\u003eTable of contents\u003c/h2\u003e\n\n- [About Mesh](#about-mesh)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Grid Setup](#grid-setup)\n    - [SCSS](#scss)\n    - [HTML](#html)\n- [Unique Selling Points](#unique-selling-points)\n    - [Responsive Gutter](#responsive-gutter)\n    - [Gutter On Outside](#gutter-on-outside)\n    - [Mobile First || Desktop First](#mobile-first--desktop-first)\n    - [Unlimited Breakpoints](#unlimited-breakpoints)\n    - [Property Overwrite](#property-overwrite)\n    - [Custom Class Names](#custom-class-names)\n    - [Excluding](#excluding)\n- [Components](#components)\n  - [Container](#container)\n  - [Void](#void)\n  - [Column](#column)\n  - [Offset](#offset)\n  - [Pull](#pull)\n  - [Push](#push)\n- [Nesting](#nesting)\n- [Ordering](#ordering)\n- [Properties](#properties)\n\n## About Mesh\n\nThere are a lot of different grid systems already out there and most of them are pretty good. But ☝️ none of them is offering the whole bandwidth of possible options. E.g. I wanted to switch between a `flex`, `inline-block` or `float` based grid as well as I wanted to be able to overwrite certain parameters like [gutter](#properties) or [column-count](#properties) breakpoint wise. That is how I came up with the idea to create my very own grid compiler and Mesh was born 🎉🎉🎉.\n\n## Getting Started\n\n### Installation\n\n```console\n$ npm i postcss-mesh\n```\n\n### Grid Setup\n\n#### SCSS\n\nMesh is based on @-rules. To initiate a new grid use `@mesh-grid`. All breakpoints for a grid should be nested within the respective grid declaration. See the example below for a simple grid setup with bootstrap standards.\n\n```css\n@mesh-grid {\n    column-count: 12;\n    compile: true;\n    container-width: 100%;\n    display-type: float;\n    gutter-on-outside: true;\n    gutter: 30px;\n    name: mesh;\n    query-condition: min-width;\n    responsive-gutter: false;\n\n    @mesh-viewport-sm {\n        container-width: 540px;\n        viewport: 576px;\n    }\n\n    @mesh-viewport-md {\n        container-width: 720px;\n        viewport: 768px;\n    }\n\n    @mesh-viewport-lg {\n        container-width: 960px;\n        viewport: 992px;\n    }\n\n    @mesh-viewport-xl {\n        container-width: 1140px;\n        viewport: 1200px;\n    }\n}\n```\n\n#### HTML\n\n```html\n// This markup is a two column grid with equal widths // for all defined breakpoints.\n\n\u003cdiv class=\"mesh-container\"\u003e\n    \u003cdiv class=\"mesh-void\"\u003e\n        \u003cdiv class=\"mesh-column-6 mesh-column-sm-6 mesh-column-md-6 mesh-column-lg-6 mesh-column-xl-6\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"mesh-column-6 mesh-column-sm-6 mesh-column-md-6 mesh-column-lg-6 mesh-column-xl-6\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003cimg width=\"100%\" height=\"auto\" src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/examples/setup.png\" align=\"center\"\u003e\n\n## Unique Selling Points\n\n#### Responsive Gutter\n\nSet the [responsive-gutter](#properties) property to `true` to scale the gutter as your [container](#container) grows. This makes your grid less static and more fluid. To make this feature work you have to set a `viewport` context even in your default settings of the grid.\n\n_This feature inherits the gutter size for the first nested level only._\n\n```css\n// This set up uses 375px as context.\n// If your screen is 375px wide the gap\n// between your columns should be exact 30px.\n// If your screen gets bigger, the gap scales up.\n// If your screen gets smaller, the gap scales down.\n\n@mesh-grid {\n    viewport: 375px;\n    gutter: 30px;\n    responsive-gutter: true;\n}\n```\n\n\u003ch5\u003eRegular Gutter\u003c/h5\u003e\n\u003cimg width=\"100%\" height=\"auto\" src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/examples/non-responsive-gutter.gif\" align=\"center\"\u003e\n\u003ch5\u003eResponsive Gutter\u003c/h5\u003e\n\u003cimg width=\"100%\" height=\"auto\" src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/examples/responsive-gutter.gif\" align=\"center\"\u003e\n\n#### Gutter On Outside\n\nAllows you to toggle the [container's](#container) padding which is based on the [gutter](#properties) size.\n\n```css\n// true || false\n// default: true\n\n@mesh-grid {\n    gutter-on-outside: true;\n}\n```\n\n#### Mobile First || Desktop First\n\nYou can decide if your default viewport is a desktop one or a mobile one using the [query-condition](#properties) property. This property takes `min-width` or `max-width` as an argument. If set to `min-width` your default viewport will be a mobile one. As soon as your screen's width hits the next bigger width defined in all of your breakpoints, it snaps to the related breakpoint.\n\n```css\n// min-width || max-width\n// default: min-width\n\n@mesh-grid {\n    query-condition: min-width;\n}\n```\n\n#### Unlimited Breakpoints\n\nBootstrap comes with five predefined breakpoints (Extra small _\u003c576px_, Small _≥576px_, Medium _≥768px_, Large _≥992px_, Extra Large _≥1200px_). These breakpoints have proved its worth over time. But nevertheless, sometimes your design requires more individual breakpoints. In this case Mesh is your best friend. With Mesh you can define as many or as less custom breakpoints as you want using the `@mesh-viewport-VIEWPORTNAME`-@-rule where `VIEWPORTNAME` is the viewport's ID. The ID is used in the viewport specific classes. E.g. `@mesh-viewport-lg` results in `.mesh-column-lg`-classes.\n\n```css\n// this is how you would define a standard large bootstrap breakpoint\n// properties \"container-width\" \u0026 \"viewport\" are required\n\n@mesh-viewport-lg {\n    container-width: 960px;\n    viewport: 992px;\n}\n```\n\n#### Property Overwrite\n\nProperty Overwrite allows you to overwrite some properties breakpoint wise, e.g. `gutter`. Learn more about properties [here](#properties).\n\n```css\n// default: 30px\n\n@mesh-viewport-lg {\n    gutter: 30px;\n}\n```\n\n#### Custom Class Names\nOverwrite the default classNames to keep them unique, short or both. See the [properties list](#properties) for the whole range of naming properties.\n\n```CSS\n// this changes all selectors containing \"column\"\n// e.g. \".mesh-column-1\" to \".mesh-col-1\"\n\n@mesh-grid{\n  naming-column: col;\n}\n```\n\n\n#### Excluding\nIt's a fact: Most projects don't use the whole bandwith of available column-spans. This leads to many lines of unused CSS in the final bundle. Thanks to this feature it is possible to exclude certain column-spans for certain [components](#components) viewport wise.\n\n```CSS\n// this how you would exclude \".mesh-column-1\" \u0026 \".mesh-column-2\"\n\n@mesh-grid{\n  exclude-columns: 1,2;\n}\n```\nYou can also `exclude-pushes`, `exclude-pulls` \u0026 `exclude-offsets`. See the [properties list](#properties) for the whole range of excluding properties.\n\n## Components\n\nMesh's compiled Grid is made of three basic components and three transform components. The basic components describe the `.mesh-container`, `.mesh-void` \u0026 `.mesh-column` classes. These components are necessary to set up a very basic grid. The transform components describe the `.mesh-offset`, `.mesh-pull` \u0026 `.mesh-push` classes. These components are necessary to transform a [column](#column) within your grid and should be added to a column component only. Using transform components you can reorder your columns.\n\n### Container\n\nThe container is the most outer component of a grid instance. It sets up the maximum width of the grid and should not be nested.\n\n```html\n\u003cdiv class=\"mesh-container\"\u003e\u003c/div\u003e\n```\n\n### Void\n\nThe void component is the equivalent to Bootstrap's `row` component and voids its parent's [gutter](#gutter). The only immediate child of a void component should be a [column](#column).\n\n```html\n\u003cdiv class=\"mesh-void\"\u003e\u003c/div\u003e\n```\n\n### Column\n\nThe column component is where you can put your content. All columns should be an immediate child of a [void](#void) component. Replace `x` with a number between 1 and your given column-count.\n\n```html\n\u003c!--\nFor breakpoint specific column widths include your\nbreakpoint's ID in the class, e.g. 'mesh-column-lg-6'.\n--\u003e\n\n\u003cdiv class=\"mesh-column-x\"\u003e\u003c/div\u003e\n```\n\n### Offset\n\nThe offset component will add a margin to the respective [column](#column) to create an even bigger gap between two columns. Using the component like below will offset the column about the width of a single column.\n\n```html\n\u003c!--\nFor breakpoint specific column offsets include your\nbreakpoint's ID in the class, e.g. 'mesh-offset-lg-1'.\n--\u003e\n\n\u003cdiv class=\"mesh-offset-1\"\u003e\u003c/div\u003e\n```\n\n### Pull\n\nThe pull component will reposition the respective [column](#column) from the right. Using the component like below will pull the column about the width of a single column to the left.\n\n```html\n\u003c!--\nFor breakpoint specific column pulls include your\nbreakpoint's ID in the class, e.g. 'mesh-pull-lg-1'.\n--\u003e\n\n\u003cdiv class=\"mesh-pull-1\"\u003e\u003c/div\u003e\n```\n\n### Push\n\nThe push component will reposition the respective [column](#column) from the left. Using the component like below will push the column about the width of a single column to the right.\n\n```html\n\u003c!--\nFor breakpoint specific column pushes include your\nbreakpoint's ID in the class, e.g. 'mesh-push-lg-1'.\n--\u003e\n\n\u003cdiv class=\"mesh-push-1\"\u003e\u003c/div\u003e\n```\n\n## Nesting\n\nOf course you can also nest your [columns](#column).\n\n```html\n\u003c!--\nThis is how you can nest columns within columns.\nIf using \"responsive-gutter\" you can only go one\nlevel deep keeping the roots gutter size.\n--\u003e\n\n\u003cdiv class=\"mesh-container\"\u003e\n    \u003cdiv class=\"mesh-void\"\u003e\n        \u003cdiv class=\"mesh-column-6\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"mesh-column-6\"\u003e\n            \u003cdiv class=\"mesh-void\"\u003e\n                \u003cdiv class=\"mesh-column-6\"\u003e\u003c/div\u003e\n                \u003cdiv class=\"mesh-column-6\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003cimg width=\"100%\" height=\"auto\" src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/examples/nesting.png\" align=\"center\"\u003e\n\n## Ordering\n\nSometimes you have to switch position of certain [columns](#column) breakpoint wise. Using [push](#push) and [pull](#pull) components you can shift your columns.\n\n```html\n\u003c!--\nThis markup moves the first column by the width of\nthree columns to the right and the second column\nby the width of nine columns to the left.\n--\u003e\n\n\u003cdiv class=\"mesh-container\"\u003e\n    \u003cdiv class=\"mesh-void\"\u003e\n        \u003cdiv class=\"mesh-column-9 mesh-push-3\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"mesh-column-3 mesh-pull-9\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003cimg width=\"100%\" height=\"auto\" src=\"https://raw.githubusercontent.com/SlimMarten/postcss-mesh/development/assets/img/examples/ordering.png\" align=\"center\"\u003e\n\n## Properties\n\nMesh is based on a bunch of properties you can adjust to your needs. Some of them are overwriteable in each defined breakpoint. See the table below to get an overview of what Mesh is offering.\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth align=\"left\"\u003eProperty\u003c/th\u003e\u003cth align=\"left\"\u003eDescription\u003c/th\u003e\u003cth align=\"left\"\u003eOptions\u003c/th\u003e\u003cth align=\"left\"\u003eOverwrite\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003c!-- \u003ctr\u003e\u003cth colspan=\"5\" align=\"center\"\u003eBasic Properties\u003c/th\u003e\u003c/tr\u003e --\u003e\n    \u003c!-- \u003ctr\u003e\u003cth colspan=\"5\" align=\"center\"\u003eViewport-Relevant Properties\u003c/th\u003e\u003c/tr\u003e --\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecolumn-align\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAligns all columns at the top, middle or bottom of a void.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etop\u003c/code\u003e || \u003ccode\u003emiddle\u003c/code\u003e || \u003ccode\u003ebottom\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecolumn-count\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDefines how many columns fit in one void.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecompile\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eIf set to \u003ccode\u003efalse\u003c/code\u003e Mesh won't compile classes of the current grid.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e || \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003econtainer-base-width-unit\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDefines the container's \u003ccode\u003ewidth\u003c/code\u003e unit.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e%\u003c/code\u003e || \u003ccode\u003evw\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003econtainer-width\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDefines the container's \u003ccode\u003emax-width\u003c/code\u003e property for current viewport.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003epx\u003c/code\u003e || \u003ccode\u003e%\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edebug\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eIf set to \u003ccode\u003etrue\u003c/code\u003e Mesh generates excluded classes and extends the style with \u003ccode\u003edebug-property\u003c/code\u003e of \u003ccode\u003edebug-value\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e || \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edebug-property\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eA valid CSS Property for \u003ccode\u003edebug\u003c/code\u003e style extension.\u003c/td\u003e\n      \u003ctd\u003ee.g. \u003ccode\u003eborder\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edebug-value\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eA value for the given \u003ccode\u003edebug-property\u003c/code\u003e.\u003c/td\u003e\n      \u003ctd\u003ee.g. \u003ccode\u003e1px dotted red\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edisplay-type\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDefines if the grid is inline-block, float or flex based.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003einline-block\u003c/code\u003e || \u003ccode\u003efloat\u003c/code\u003e || \u003ccode\u003eflex\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eexclude-columns\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven integers define spans to exclude from column classes.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eint, int\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eexclude-offsets\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven integers define spans to exclude from offset classes.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eint, int\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eexclude-pulls\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven integers define spans to exclude from pull classes.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eint, int\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eexclude-pushes\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven integers define spans to exclude from push classes.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eint, int\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egutter\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSets the gap between columns.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003epx\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egutter-on-outside\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eIf set to \u003ccode\u003efalse\u003c/code\u003e the container won't have a padding.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e || \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ename\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSets the grid's name and adjusts the component's class prefix.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-column\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003ecolumn\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-container\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003econtainer\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-offset\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003eoffset\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-pull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003epull\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-push\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003epush\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003enaming-void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGiven string replaces \u003ccode\u003evoid\u003c/code\u003e in all generated selectors.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003equery-condition\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eUsing this property you can decide if you want the compiled styles to be mobile first or desktop first.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003emin-width\u003c/code\u003e || \u003ccode\u003emax-width\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eresponsive-gutter\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eIf set to \u003ccode\u003etrue\u003c/code\u003e the gutter scales as the container grows.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e || \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003euse-name-prefix\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eIf set to \u003ccode\u003efalse\u003c/code\u003e Mesh won't use the grid's name as a class prefix.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e || \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eviewport\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDefines the screen's width at which a new media-query should be initiated.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003epx\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartenzander%2Fpostcss-mesh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartenzander%2Fpostcss-mesh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartenzander%2Fpostcss-mesh/lists"}