How to Create a Grid with CSS

If you have to create a grid to present data in HTML, you can also do it without using tables with the help of CSS. In this post we provide an example with CSS and HTML code.

In order to create a grid in CSS, we create an ID with named grid and 2 sperate classes named row and cell.

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
<div id="grid">
<div>
<div style="width: 150px;">Row1 Cell1</div>
<div style="width: 80px;">Row1 Cell2</div>
<div style="width: 80px;">Row1 Cell3</div>
</div>
<div>
<div style="width: 150px;">Row2 Cell1</div>
<div style="width: 80px;">Row2 Cell2</div>
<div style="width: 80px;">Row2 Cell3</div>
</div>
<div>
<div style="width: 150px;">Row3 Cell1</div>
<div style="width: 80px;">Row3 Cell2</div>
<div style="width: 80px;">Row3 Cell3</div>
</div>
</div>

CSS:

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
#grid
{
width: 320px;
height: 200px;
border-right: 1pt gray solid;
overflow: scroll;
clear:both;
}
.row
{
float: left;
border-top: 1pt gray solid;
overflow: hidden;
}
.cell
{
float: left;
border-left: 1pt gray solid;
padding: 5px;
overflow: hidden;
white-space: nowrap;
}


Related posts

1 Response

By Thomas & Cassie

April 16, 2012

You didnt include the classes in the rows and cells.


Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.