A CSS grid that streamlines layout development
Core Grid is a modern flexbox grid system that aims to solve several issues with the standard 12-column model. To improve the developer experience, the class naming system has been streamlined so that class lists can be consise, yet expressive. For greater control over the layout across devices, there are more breakpoints, which are evenly and logically spaced. To provide more layout possibilities, additional column features have been rolled in that seamlessly integrate with the conventional percentage-based options.
- Flexbox layout
- Mobile-first methodology
- Concise and intuitive class names
- Logical breakpoints
- No margins, padding, or gutters
- No nesting limitations
- No container requirements
- Ability to hide columns
- Ability to set column width to minimum required
- Ability to set column width to maximum available
npm install core-grid
.row is a container for columns. By default, a row will occupy the full width of its parent.
.col is a container for content. By default, a column will occupy the maximum amount of space available within its row.
<!-- Column is 100% width --><!-- Columns are 50% width -->
Column Width Classes
Rather than sharing the space evenly, columns can each have their own widths set as a percentage of the total width. This is indicated in a class name as the number of columns to occupy out of 12. For example, a column that spans one-quarter of the row occupies 3 columns, and a column that spans two-thirds of the row occupies 8 columns.
The width of a
.col can also be set to change according to the current window width, which is categorized into 5 sizes,
When writing column classes, the window width is the prefix and the column width is the suffix. For example, a column that is full-width on mobile devices, and one-half-width on everything larger would be written as
col xs-12 sm-6. The grid system is mobile-first, so the
xs style is overridden by the
sm style, and the
sm style applies to all larger sizes since it is not overridden by anything itself.
<!-- Column width changes according to window width -->
Min and Max Column Widths
In addition to the percentage-based suffixes, there are two more:
max, which will occupy the maximum amount of space that is available (default column behavior), and
min, which will only occupy the minimum amount of space that it requires.
For example, to create a card component where there is an image on the left and a paragraph on the right, the
max behaviors complement each other nicely. The column that contains the image can be set to
min so that its size is dictated by the image's size, and the column that contains the paragraph can be set to
max so that it may occupy all the space that is left over.
<!-- Min and max used together -->
.col can be hidden by using a class suffixed with
0. This applies
display: none for that window size and larger, unless overridden by another column classes.
<!-- Hidden only the smallest size --><!-- Hidden only on the largest size --><!-- Visible only on the smallest size --><!-- Visible only on the largest size --><!-- Hidden/visible on alternating sizes -->
The grid uses logical breakpoints, evenly distributed at 16rem intervals to create a smooth gradation.
|Prefix||Window Width (em)||Window Width (px)|
||>= 0||>= 0|
||>= 32em||>= 512px|
||>= 48em||>= 768px|
||>= 64em||>= 1024px|
||>= 80em||>= 1280px|
The grid uses a 12-column system in order to provide a high level of freedom. Additionally, the
0 suffix hides the column, and the
max suffixes provide more situational behavior.
||Minimum space required|
||Maximum space available|