https://github.com/mariusz-ba/postcss-ms-grid

PostCSS plugin for adding css-grid fallback for IE.
https://github.com/mariusz-ba/postcss-ms-grid

css-grid grid ie11 ie11-grid postcss postcss-plugin

Last synced: 5 days ago
JSON representation

PostCSS plugin for adding css-grid fallback for IE.

• Host: GitHub
• URL: https://github.com/mariusz-ba/postcss-ms-grid
• Owner: mariusz-ba
• Created: 2019-12-22T13:13:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:30:08.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T07:50:40.622Z (17 days ago)
• Topics: css-grid, grid, ie11, ie11-grid, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 727 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-ms-grid

Simple and clean postcss plugin for adding css-grid fallback for ie.

## Install

```bash

npm install -D postcss-ms-grid

```

## Usage

Register postcss plugin in *postcss.config.js*

```js

module.exports = {

  plugins: [

    require('postcss-ms-grid')

  ]

};

```

Create grid layout using css grid:

```css

.container {

  grid-template-rows: repeat(3, 1fr);

  grid-template-columns: 1fr 200px 300px;

  grid-column-gap: 10px;

  grid-row-gap: 20px;

}

.column1 {

  grid-column: 1 / span 2 / true;

  grid-row: 1 / span 3 / true;

}

.column2 {

  grid-column: 3 / span 1 / true;

  grid-row: 1 / span 3 / true;

}

```

As you can see from the example you can use css grid as you would do it without this plugin. This plugin takes care of adding correct `-ms` prefixes for IE11 and handles additional columns when row/column gap is defined. Every gap is treated as an additional row/column. You don't have to take this under consideration when defining `grid-column` or `grid-row`. Plugin takes care of it automatically.

The only thing you have to remember when using `grid-column` and `grid-row` is that you have to add additional `/ true` at the end of rule if your container is using either `grid-column-gap` or `grid-row-gap`.

## Notes

Please note that this plugin does not support `grid-template-areas`. Supporting it would add more complexity and final css bundle would be significantly bigger depending of amount elements using css grid in your codebase. This plugin aims for as cleaner and lightweight IE11 css grid implementation as possible, therefor it doesn't support `grid-template-areas`.