CSS Cols

CSS grid and breakpoints.

Installation

• npm install
• npm start in case you want to build grid and demo with your own values.

How to link to your project

Import src/scss/main.scss to your project's main.scss file. In this case the DartSass is required.

@use "./node_modules/css-cols/src/scss/variables" as *;
@use "./node_modules/css-cols/src/scss/mixins" as *;
@use "./node_modules/css-cols/src/scss/cols" as *;
@use "./node_modules/css-cols/src/scss/functions" as *;

OR

Link built main.css to your site.

<link rel="stylesheet" href="/css/main.min.css">

Usage

Columns and devices

{COL} is a number from 1 to 12.

{DEVICE} is a device:

• mobile
• tablet
• tablet-landscape
• desktop
• desktop-big

Default values of breakpoints

• "mobile": up to 599px,
• "tablet": from 600px,
• "tablet-landscape": from 900px,
• "desktop": from 1200px,
• "desktop-big": from 1800px

These values can be changed or you can add your own in src/scss/_variables.scss

Classes

.container {}

.row {}

.col {}

.col-{COL} {}

.col-{DEVICE}-up {}

.col-push-{COL}-{DEVICE}-up {}

.col-pull-{COL}-{DEVICE}-up {}

Mixins

@include breakpoint({DEVICE}) {}

Examples

The same sizes of columns - all devices including mobile

<div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

Various sizes of columns - all devices including mobile

<div class="row">
    <div class="col col-3">col-3</div>
    <div class="col col-4">col-4</div>
    <div class="col col-5">col-5</div>
</div>

Various sizes of columns - across all devices except mobile. Mobile remains 100%.

<div class="row">
    <div class="col col-12 col-4-tablet-up">col-12 col-4-tablet-up</div>
    <div class="col col-12 col-8-tablet-up">col-12 col-8-tablet-up</div>
</div>

Push & pull columns

<div class="row">
    <div class="col col-6 push-1-desktop-up">col-6 push-1-desktop-up</div>
    <div class="col col-6 pull-2-desktop-up">col-6 pull-2-desktop-up</div>
</div>

Demo

Demo