GridWorks-sample2

Sample1 Sample1
(960gs - px based grids)
|
Sample2 Sample2
(Unsemantic - percent based grids)
|
Sample3 Sample3
(Griddle - percent based grids)
|
Sample4 Sample4
(BlueprintCss - grids)
|
Sample5 Sample5
(Purecss - grids)

View Source

Unsemantic - Responsive Demo


100% 50%  

95% 50%  

5% 50%  

90% 50%  

10% 50%  

85% 50%  

15% 50%  

80% 50%  

20% 50%  

75% 50%  

25% 50%  

70% 50%  

30% 50%  

65% 50%  

35% 50%  

60% 50%  

40% 50%  

55% 50%  

45% 50%  

50% 50%  

50% 50%  

33% 50%  

33% 50%  

33% 50%  

66% 50%  

33% 50%  


Prefix & Suffix

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  


Push & Pull (for SEO)

Green = push. Pink = pull.

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

10% 50%  

20% 50%  

20% 50%  

20% 50%  

20% 50%  

20% 50%  

25% 50%  

25% 50%  

25% 50%  

25% 50%  

66% 50%  

33% 50%  

33% 50%  

33% 50%  

33% 50%  


Nested Columns

Parent Column

50% 50%  

50% 50%  

Parent Column

50% 50%  

50% 50%  

Parent Column

25% 50%  

25% 50%  

25% 50%  

25% 50%  

Parent Column

25% 50%  

25% 50%  

25% 50%  

25% 50%  


With tablet classes

I am 50% wide on desktop. I am 100% wide on mobile. I am 50% wide on tablet.

I am 25% wide on desktop. I am 50% wide on mobile. I am 50% wide on tablet.

I am hidden on desktop. I am hidden on mobile. I am hidden on tablet.

Edit - History - Print - Recent Changes - Search
Page last modified on November 08, 2022, at 02:46 AM