css-grid-polyfill

A working implementation of css grids for current browsers.

1,112

View on GitHub View on NPM

Top Related Projects

solved-by-flexbox

12,994

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

bootstrap

172,247

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

normalize.css

53,073

A modern alternative to CSS resets

learning-area

7,243

GitHub repo for the MDN Learning Area.

Quick Overview

The FremyCompany/css-grid-polyfill is a JavaScript library that provides a polyfill for the CSS Grid Layout specification, allowing developers to use the powerful grid layout system in older browsers that do not natively support it.

Pros

Comprehensive Grid Support: The polyfill supports a wide range of CSS Grid features, including grid-template-columns, grid-template-rows, grid-gap, and more.
Responsive Design: The polyfill automatically adjusts the grid layout based on the browser's viewport size, enabling responsive web design.
Minimal Dependencies: The library has no external dependencies, making it lightweight and easy to integrate into existing projects.
Active Development: The project is actively maintained, with regular updates and bug fixes.

Cons

Performance Impact: The polyfill may have a slight performance impact on the web page, as it requires additional JavaScript execution.
Potential Compatibility Issues: The polyfill may not work perfectly with all browser configurations, and there may be some edge cases where it fails to replicate the native CSS Grid behavior.
Limited Browser Support: The polyfill is designed to work with older browsers that do not support CSS Grid natively, but it may not work with the very oldest browsers.
Increased Complexity: Integrating the polyfill into a project may add some complexity to the development process, as developers need to ensure that the polyfill is properly configured and integrated.

Code Examples

Here are a few examples of how to use the CSS Grid Polyfill:

Basic Grid Layout:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

Grid with Named Areas:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Responsive Grid Layout:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Getting Started

To use the CSS Grid Polyfill in your project, follow these steps:

Install the library using npm or yarn:

npm

Competitor Comparisons

solved-by-flexbox

12,994

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Pros of Solved by Flexbox

Provides a comprehensive set of flexbox-based solutions for common layout challenges
Offers a well-documented and easy-to-use approach to implementing responsive designs
Supports a wide range of browsers, including older versions of Internet Explorer

Cons of Solved by Flexbox

Relies on flexbox, which may not be supported in all browsers, especially older versions
May require additional CSS or JavaScript to achieve the same level of functionality as CSS Grid
Might not be as flexible or powerful as CSS Grid for certain layout requirements

Code Comparison

CSS Grid Polyfill

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

Solved by Flexbox

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10px;
}

.flex-item {
  flex: 0 0 calc(33.33% - 20px);
  background-color: #f1f1f1;
  padding: 20px;
  margin: 10px;
}

bootstrap

172,247

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Pros of Bootstrap

Extensive documentation and community support
Wide range of pre-built components and utilities
Responsive design out of the box

Cons of Bootstrap

Larger file size compared to a CSS grid polyfill
Opinionated design that may not fit all project needs
Potential for overuse of Bootstrap-specific classes

Code Comparison

CSS Grid Polyfill

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f1f1f1;
  padding: 20px;
}

Bootstrap Grid

<div class="row">
  <div class="col-4">
    <div class="bg-light p-3">Column</div>
  </div>
  <div class="col-4">
    <div class="bg-light p-3">Column</div>
  </div>
  <div class="col-4">
    <div class="bg-light p-3">Column</div>
  </div>
</div>

normalize.css

53,073

A modern alternative to CSS resets

Pros of Normalize.css

Provides a consistent baseline for styling across different browsers, ensuring a more predictable and reliable user experience.
Includes a comprehensive set of CSS resets and normalizations, addressing common cross-browser inconsistencies.
Actively maintained and widely adopted, with a large community of contributors and users.

Cons of Normalize.css

Primarily focused on normalizing default styles, rather than providing a complete grid system like CSS Grid Polyfill.
May not be necessary for projects that already have a well-defined design system or UI framework in place.
Requires additional CSS to implement a grid layout, whereas CSS Grid Polyfill provides a more comprehensive grid solution.

Code Comparison

Normalize.css (5 lines):

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

CSS Grid Polyfill (5 lines):

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

.grid > * {
  background-color: #f1f1f1;
  padding: 20px;
}

learning-area

7,243

GitHub repo for the MDN Learning Area.

Pros of mdn/learning-area

Comprehensive collection of web development learning resources
Actively maintained and updated by the Mozilla Developer Network
Covers a wide range of topics, from HTML and CSS to JavaScript and web APIs

Cons of mdn/learning-area

Primarily focused on educational content, not a specific polyfill or library
May not provide the same level of detailed implementation as a dedicated project
Less specialized in addressing specific CSS Grid challenges

Code Comparison

FremyCompany/css-grid-polyfill:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

mdn/learning-area (CSS Grid example):

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

csswg-drafts

4,613

CSS Working Group Editor Drafts

Pros of csswg-drafts

The csswg-drafts repository is the official repository for the CSS Working Group, which is responsible for developing and maintaining the CSS specification.
It provides a centralized location for the latest CSS drafts and proposals, allowing developers to stay up-to-date with the latest CSS developments.
The repository is actively maintained and updated by the CSS Working Group, ensuring the accuracy and reliability of the content.

Cons of csswg-drafts

The csswg-drafts repository is primarily focused on the CSS specification and may not provide practical implementation details or polyfills for specific CSS features.
The repository can be less accessible to developers who are not directly involved in the CSS Working Group, as it may require a deeper understanding of the specification and the standardization process.

Code Comparison

CSS Grid Polyfill (FremyCompany/css-grid-polyfill):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

CSS Working Group Drafts (w3c/csswg-drafts):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

The code examples for both repositories are identical, as they both represent the same CSS Grid layout implementation.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

CSS-Grid-Polyfill

IMPORTANT NOTE: The Grid specification has undergone several major changes since this polyfill was written, and I have not had time to work on keeping the polyfill up to date. I welcome contributions and am ready to help, but I do not have time to commit on fixing issues myself at this time.

Welcome to this first version of the CSS-Grid-Polyfill. The goal of this project is to provide a working implementation of css grids for current browsers, for prototyping purposes.

Whatâs in for you?

You are now ready to try out css grids in IE 9+ and probably most other recent browsers, with the simple addition of a script on your page â and to the condition your style sheets are located on your own server (or accessible via CORS).

The polyfillâs css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like â:hoverâ, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout of your grid.

Most features of the css grid spec are in. For instance, the polyfill support more features than the IEâs implementation, as well as all the features implemented in Chrome Canary under a flag today, and actually renders more accurately than Chrome in most cases. [Edit: As of May 2015, this is no longer true as bugs I reported were fixed, and Chrome added new features]

Use any of the possible ways you can define a grid (rows/columns, grid lines, areas, â¦) and mix them as you wish, with the caveat that you align items to the right edge of the grid using negative indexes, or with fixed row/column-end and a span value as row/column-start.

Automatic placement is supported with both the ânormalâ and the âdenseâ algorithms. Each one comes in both the ârowâ and âcolumnâ flavors (which allow you to choose the direction in which the automatic algorithm progress, from left to right or from top to bottom).

Fraction sizes (the âfrâ unit) are also supported, and are indented to work exactly as the spec says it should.

Show me some demos!

I guess you should be somewhat impressed at this point, but wonder if things are really as beautiful as painted before, so letâs move to actual demos!

NOTE: most of those demos are coming from âGrid By Exampleâ, a website from Rachel Andrew.

Whatâs not working right now?

As always, there has to be gotchas.

Because the layout is done asynchronously, the polyfill may play badly with other libraries that expect layout to be performed synchronously. This is particularly true if you plan to animate your grid.

The whole polyfill is very sensitive to changes to the âbox-sizingâ property (and many frameworks like Bootstrap do make use of it); again, this will be ironed out soon but you have to be aware.

The polyfill doesnât like fixed/absolutely positioned grid items. If you want to use them, just put them in a dummy wrapper, it will work fine.

Like IE and Chrome, the polyfill does not support the âsubgridâ feature, and (similarly) doesnât like when a grid-item is a grid itself. I hope to solve this someday using a CSS Layout Polyfill Infrastructure but this will require some background work I donât expect to have time to do in the immediate future.

Also, Iâm youâll find other bugs I didnât mention. Please bear with me ^_^

Should I use that in production?

Your call. I wouldnât say this polyfill is slow by any measure, but your mileage may vary on mobile devices. My advice would be to use the polyfill only on tablets and desktops at the moment, after you have tested the compatibility and performance extensively on a representative number of devices.

To the contrary of my previous CSS Regions Polyfill, I didnât carry such a broad compatibility and performance testing myself at the moment because I still expect to change the code significantly in the future, so that would be wasted time. That doesnât mean you canât do it on your own, and report any issue you did find ;-)

Can I contribute?

Sure! Please report bugs here, and feel free to make pull requests!

The code is globally pretty readable, and if it isnât you can report it as a bug! Maintaining a good code quality is a requirement for this project, and I take this very seriously.

Contributing

Please feel free to contribute to this project, either by fixing bugs in the core libraries or by fixing the css-grid polyfill.

In lieu of a formal styleguide, we will simply ask you to take care to maintain the existing coding style. For instance, please:

use tabs for indentation at the beginning of lines.
put opening braces on the same line as the block definition.
avoid if or else statements without braces.

Also, please don't edit files in the "bin" subdirectory as they are generated via Grunt. You'll find source code in the "src" subdirectory!

Testing

Rather than have to test your changes manually, you can add an example page to the demo/ directory and run npm run update-snapshots. Then you can run the test server using npm run test and open localhost:4743 in your browser.

npm run update-snapshots - this will 'snapshot' how the newest version of Chromium lays out the elements inside a .wrapper element

npm run test runs a server which serves a html file on the root path that will open all the html pages in the demo/ directory in iframes and compare how they are laid out to the snapshots taken from Chromium. You can open this page in any browser to test how your changes work cross-browser.

Release History

The aim of this section is to report the major milestones of the project:

2015-06-19: Added 'order' property, fixed bugs, and support the updated syntax
2014-11-01: First release of the css-grid-polyfill

You can follow the release or install them using bower from there:

https://github.com/FremyCompany/css-grid-polyfill-binaries.

License

Copyright (c) 2014 FranÃ§ois REMY
Licensed under the MIT license. Some sections may have an Apache license applied to them.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Solved by Flexbox

Cons of Solved by Flexbox

Code Comparison

Pros of Bootstrap

Cons of Bootstrap

Code Comparison

Pros of Normalize.css

Cons of Normalize.css

Code Comparison

Pros of mdn/learning-area

Cons of mdn/learning-area

Code Comparison

Pros of csswg-drafts

Cons of csswg-drafts

Code Comparison

Convert designs to code with AI

README

CSS-Grid-Polyfill

Whatâs in for you?

Show me some demos!

Whatâs not working right now?

Should I use that in production?

Can I contribute?

Contributing

Testing

Release History

License

Top Related Projects

Convert designs to code with AI

Whatâs in for you?

Whatâs not working right now?