A while a GitHub issue in the sp-dev-docs came to my attention, where someone had a problem titled as Can’t get grid system working using office fabric ui react. I took a closer look on why it is so challenging to get the grid system running right now and in SPFx projects in general. There are some catches you need to be aware.
Office UI Fabric is somewhat like the first and foremost first third-party Framework that you may want to use in all your projects to create a seamless experience with the rest of the Office 365 platform. It is not exclusively to SharePoint or SharePoint Framework Projects.
My reply and solution to this issue
To apply the same CSS properties used by other classes you can call functions in SASS aka mixin. It is what happens, for example, in this class:
The hash at the end of the class names makes sure that one web part doesn’t overlap style definitions of another web part on the page. By no means, this doesn’t make your web part “Type-safe” because this is a “concept” by no means something CSS is aware. CSS only has a binary state attached. It works, or it doesn’t work.
To make use of the classes that got these predefined properties via the mixin. You always have to use in the React Control like this.
This way, you build your grid base on the settings of the Office UI grid. This output the web part, for example, in this form.
The black container is actually where the grid column gets assigned too. It is working in 1.8.2 by modifying the default provisioned web part with the following CSS.
The downside of this approach is that you get everything from Office UI Fabric included not only the grid system.
Besides those technical challenges, there are additional web design considerations to take into account using a grid in SPFx. Depending on where you place your web part on a page. The usage of the grid might be wrong.
The result might look like this with multiple versions of a 12 grid on every web part, while grid systems should be used on a page but not in components such as a web part.
I don’t use a grid in web parts at all because of the known limitations. There are better options in the world, such as Flexbox and Grid Systems supported in CSS. Grid System right now not supported for IE11.