CSS grid layout in production

Powergrid  holly grail layout
Holly Grail Layout via Powergrid

I hope you are excited about a new addition to CSS. A grid layout. I am!

Our team decided to try it in our library for layouts. Having a need to support IE11 for the next 100 years 💀 we spent some time to figure how to use it in production.

We decided to cut a reliable subset of specs that works consistently in IE11.

Subset of Specs

But compensate for missing features like grid gutters and auto placement of grid cells.

Our approach is an alternative to existing solutions in popular libraries like MDC.

We even created an open source project Powergrid to help creating cross-browser grids.You would face several problems 😈 trying to make CSS grid work in Internet Explorer.

💔Internet explorer requires vendor prefixes.

.grid {
display: grid;
display: -ms-grid;
grid-template-columns: 100px 100px 100px;
-ms-grid-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
-ms-grid-rows: 100px 100px;
}

Powergrid can help creating those 🌟.

💔Internet explorer doesn’t support grid gutters

🌟Use box model properties of the grid items to compensate for that.

.grid>div {
padding: 10px;
margin: 5px;
}
image

💔Internet explorer doesn’t support auto placement of grid items

🌟 We can automatically place items using order of elements and some CSS magic to handle rows .

💔Internet Explorer has a different syntax for column and row span.

.grid > .span-column-2 {
grid-column-end: span 2;
-ms-grid-column-span: 2;
}

Yeah that sucks 💩 but we fixed it in Powergrid 🌟.

💔Internet Explorer doesn’t support grid level alignment justify-items, align-items

🌟CSS selectors to help… You can define classes and use it at a grid level to align items.

.grid-justify-end > *  {
justify-self: end;
-ms-grid-column-align: end;
}
image

💔 Inconsistencies in Internet Explorer and other browsers.

There are several more cases when Internet Explorer handles things differently. Try using auto or fit-content for track sizes.

🌟We found workarounds for many cases.

Give it a try! You are very welcome to share issues you face with CSS grid layout and solutions you use 👍