CSS Bootstrap-like grid

Native CSS grid classes and SCSS mixins with (nearly) the same syntax as Bootstrap grid.

This library uses the same variables as Bootstrap ($grid-columns, $grid-gutter-width, $grid-breakpoints, $container-max-widths).

Installation

Install this package, with npm, in the root directory of your project.

$ npm install @fiskhandlarn/css-bootstrap-like-grid --save-dev

Import it in your SCSS:

@import '@fiskhandlarn/css-bootstrap-like-grid';

Classes/mixins

• .container/make-container + make-container-max-widths
• .container-fluid/make-container
• .col-*, col-*-*/make-col (make-col-ready is not needed)
• .row/make-row (usually not needed, can be set on a .col to force that .col down on the next row)
• .col-start-*-*/make-col-start (used instead of offset-*-*/make-col-offset, the start number should be where the column should start and not the offset from the preceeding column)
• .nest-parent (must be set on a .col that contains other (nested) .col's), pass true as second or third argument to make-col or make-col-start to make that column into a nest-parent
• order-*-first, order-*-last, order-*-*,

Unsupported Bootstrap features

• Auto width columns (col, col-auto, col-*-auto)
• Vertical alignment and horizontal alignment (since we don't have rows) (align-items-*, align-self-*, justify-content-*)
• Offset classes (use start-* instead)
• Margin utilities (m*-auto)
• Nested content other than other columns

Browsers without grid support

If CSS grid isn't supported this library uses a flex fallback. If you need to support these browsers you need to:

• Add fallback-row-after-*/fallback-row-after-*-*/fallback-row-after-*-disable classes or use make-fallback-row-after/make-fallback-row-after-disable mixins on all columns preceeding columns using .row/make-row
• Add fallback-col-offset-*/fallback-col-offset-*-* classes or use make-fallback-col-offset mixin everywhere .col-start-*-*/make-col-start is used (please note that the offset number should be used in the same manner as in Bootstrap)

Browser support

| Firefox | Chrome | IE / Edge | Safari | iOS Safari | | --------- | --------- | --------- | --------- | --------- | | last 2 versions| last 2 versions| IE11, Edge| last 2 versions| last 2 versions

Examples