A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox.
See a combined live preview here
Documentation can be found here
SQ-Grid offers three types of grids:
- CSS Grid-based
- Flexbox-based
- Float-based
The grid which the browser should use is determined by @supports queries. In case the browser supports either native CSS grids or flexbox, the UI kit exposes class rules which the developer can use to manipulate the grid according to either grid or flexbox rules. In case the browser doesn't support either of those two features, the UI kit defaults to using floats to establish the grid rules.
- Install the package:
npm install @sq-ui/sq-grid - Import whatever you need:
./node_modules/@sq-ui/sq-grid/dist/sq-grid.css
./node_modules/@sq-ui/sq-grid/mixins.scss
./node_modules/@sq-ui/sq-grid/sq-grid.scss
The grid uses a maximum of 12 columns per row. All the width calculations and corresponding classes are based on the 12-column layout.
The grid consists of the following classes:
- .sq-grid - The parent which wraps the grid columns. By default, it does not contain any CSS rules.
- (.sq-grid).css-grid - This is an additional class to .sq-grid which enables the usage of the native CSS grid feature.
- (.sq-grid).css-flexbox - An additional class to .sq-grid. It enables the flexbox implementation of the grid system.
- (.sq-grid).auto-col-width - An additional class to .sq-grid. When this class is added, the columns width is calculated automatically (based on 12-column layout).
- .col - The class for every child of the .sq-grid container. Represents a single column of the grid.
- (.col).span-{<number>, where <number> can be an integer between 1 and 12} - An additional class to .col. It can be used to manually set the width of box. For example, .col.span-4 would mean that the box would span 4 columns.
- Clone the repository
- Run
npm install - After you modify either of the scss files, you would need to run:
npm run build:sass