A Simple CSS Grid system

Github project: https://github.com/killerchip/html5-cheatsheet/tree/simple-grid-framework

This is a very minimum grid system that you can apply in simple cases and you do not wish to include a full-force commercial framework.

It is using a 12-column grid.

How to use

  1. Copy the contents of my-fmw/grid.css into your project.
  2. Reference it from your HTML5 page: <link rel="stylesheet" href="grid.css">
  3. Enclose your layout in grid class so you can define a maximum width
  4. Create your rows with row class
  5. Define your colums with col-1 to col-11 classes

Example

home.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>

<!--
Demo page that demonstrates the use of a simple Grid framework.
-->

<html lang="en">

<head>
<meta charset="utf-8">
<title>Grid test</title>
<!-- This is the actual grid imported -->
<link rel="stylesheet" href="./my-fmw/grid.css">

<!-- Additional stylesheet to help visualize the grid system-->
<link rel="stylesheet" href="./grid-test.css">
</head>

<body>

<div class="grid">
<div class="row">
<div class="col-1">1/12</div>
<div class="col-11">11/12</div>
</div>

<div class="row">
<div class="col-2">2/12</div>
<div class="col-10">10/12</div>
</div>

<div class="row">
<div class="col-3">3/12</div>
<div class="col-9">9/12</div>
</div>

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

<div class="row">
<div class="col-5">5/12</div>
<div class="col-7">7/12</div>
</div>

<div class="row">
<div class="col-6">6/12</div>
<div class="col-6">6/12</div>
</div>
</div>

</body>

</html>

Project contents

grid.css - The actual grid system file

home.html - A page demonstrating how to use the grid system

grid-test.css - Additional styles to visual the grid system demonstration