About

Grid.css is a small, responsive, and mobile-first CSS grid with a 12-column layout based on Flexbox.

Grid.css aims to be fast, easy to use, with no unnecessary features and a minimal footprint, making it the perfect foundation for any project.

The Grid
Get Started

To get started, simply include grid.min.css in your website's <head> before any other stylesheet. You can include it manually or alternatively from a CDN.

Manually
<link rel="stylesheet" href="grid.min.css">
From CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/smrlo/grid.css/grid.min.css">
Setup

Grid.css has a responsive and mobile-first 12-column layout, that can be set up with a default width or a full page width (see maximum width at the various breakpoint in the table below).

To set up the layout you first define the container, then within the container add the rows, and finally within each row add and define the columns.

1. Start by adding the container
<!-- default width -->
<div class="container">
  ...
</div>

<!-- full page width -->
<div class="container-full">
  ...
</div>
2. Add as many rows as you need
<div class="container">
  <div class="row">
    ...
  </div>
</div>
3. Finally add and define the columns

To set up a column add the class col and then define the various column's size at the different breakpoints with c-*, s-*, m-*, l-*, xl-*, xxl-*. Replace * with a number between 1-12 to define a specific column's width (e.g. c-2); use 0 to hide the column (i.e. c-0); or use fx for a flexible column (i.e. c-fx). The default size c-* must always be defined.

Example: using c-2 instructs the column to span for a width of 2 spaces; c-5 instructs the column to span for a width of 5 spaces; xl-2 instructs the column to span for a width of 2 spaces when the screen size is ≥1200px; using xl-2 xxl-4 instructs the column to span for a width of 2 spaces when the screen size is ≥1200px, then 4 spaces when the screen size is ≥ 1400px. 

<div class="container">
  <div class="row">
    <div class="col c-12 s-6 m-6 l-4 xl-4 xxl-6"> ... </div>
    <div class="col c-0 s-6 m-3 l-4 xl-4 xxl-6"> ... </div>
    <div class="col c-0 s-0 m-3 l-4 xl-4 xxl-0"> ... </div>
  </div>
</div>
Breakpoints
Screen size Max width
container		 Max width
container-full		 Class prefix
<576px 100% 100% c-*
≥576px 540px 100% s-*
≥768px 720px 100% m-*
≥992px 960px 100% l-*
≥1200px 1140px 100% xl-*
≥1400px 1320px 100% xxl-*
Contributing

Contributing guidelines: be kind, be helpful.
Found a bug or have any suggestions? Please open a new issue.