neat-bootstrap-grid is a lightweight Sass plugin to generate Bootstrap-style column classes using native CSS grids using the Neat CSS grid as a fallback.
Neat 2.1.0+
Install neat-bootstrap-grid using Bower or Yarn. Alternatively, copy _neat-boostrap-grid-standalone.scss and _grid.scss into your project's working directory. Change the @import path in _neat-boostrap-grid-standalone.scss to point to your local copy of Neat.
bower install neat-bootstrap-grid --save-devyarn add neat-bootstrap-gridInclude any of the Bootstrap grid classes in your markup.
<html>
<body>
<div class="container">
<div class="row">
<a class="title col-xs-12 col-md-6 col-xl-5">Title</a>
<nav class="main-nav col-xs-12 col-md-6 col-xl-7">
<a href="#">Services</a>
<a href="#">Case studies</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
</div>
</body>
</html>To use native CSS grids, ensure $include-css-grids is set to true. By default, neat-bootstrap-grid uses CSS grid classes and applies native grid classes to HTML with the .cssgrid class and Neat grid classes to HTML with the .no-cssgrid class. Use Modernizr's grid detection to manage these classes automatically.