-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·104 lines (83 loc) · 4.78 KB
/
index.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Study of CSS Grid </title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="grid">
<header><h1>THE STUDY Of <br> CSS GRID</h1></header>
<p class="sm-hd">Forget the Float. Bring Back the Grid</p>
<div class="img-a">
<h1>The Most Powerful Layout System</h1>
<p>This is a whole Demo of using CSS Grid</p>
</div>
<div class="text-box intro">
<h2>Easy Layout System</h2>
<span>Look at the example below:</span>
<p>It is well known that CSS Grid is a two dimensional layout system.
And it is good for building an overall container, since you can place your content in both
X and Y directions(like the supports section in the right side), you have more freedom to control your grid items by changing the column and row line numbers.
</p>
<span>There are a few situations that you might want to apply Grid System:</span>
<ul>
<li class="point">Create the overall layout, and then place grid items inside the Grid.</li>
<li class="point">Work on your content in both directions.</li>
<li class="point">Control Grid items' positioning</li>
</ul>
<!-- <div class="boxes">1/2</div>
<div class="boxes">2/3</div>
<div class="boxes">3/-1</div> -->
</div>
<div class="text-box learn">
<h2>Browser Support</h2>
<p>CSS Grid is the latest layout system, it is supported by the most popular browsers in March 2017.</p>
<p>You can view the data about different browsers support at <a href="http://caniuse.com/#feat=css-grid"><span>Can I Use.</span></a></p>
<h2>Useful Websites</h2>
<p>Here is a few websites that I highly recommend to new Grid learner or web designer to learn this awesome Grid System:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
">CSS Grid Layout</a></li>
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/
">A Completed Guide to CSS Grid</a></li>
<li><a href="https://gridbyexample.com/">Grid By Example</a></li>
</ul>
</div>
<!-- <div class="support">
<img src="img/stamp-sups.png">
</div> -->
<div class="feature">
<!-- <h2>Advanced Features:</h2> -->
<img src="img/stamp-sups.png" height="91px" width="184.2px">
<h3 id="gutter">Flexible <span>fr</span> unit</h3>
<p>Using <span><a href="https://social.msdn.microsoft.com/Forums/en-US/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/grid-layout-fr-measurement-what-does-it-mean?forum=winappswithhtml5">fr</a></span> unit like percentage to design the layout and overall grid area</p>
<h3>Grid Item Placement</h3>
<p>Place and target items into the area on the grid by using <span><a href ="https://css-tricks.com/almanac/properties/g/grid-rows-columns/">the column lines and row lines number</a></span></p>
<h3>No Float</h3>
<p><span><a href="https://rachelandrew.co.uk/archives/2017/03/20/css-grid-fallbacks-and-overrides/">Float</a></span> doesn’t affect any Grid items.</p>
<h3>Grid within A Grid</h3>
<p>Add <span><a href="https://gridbyexample.com/examples/example21/">additional columns and rows</a></span> within the mother grid container </p>
<h3>Overlapping Grid Items</h3>
<p>Grid items and Grid areas can <span><a href="https://gridbyexample.com/examples/example15/">overlap</a></span> each other </p>
</div>
<div class="itembox item-a">A</div>
<div class="itembox item-b">B</div>
<div class="itembox item-c">C</div>
<div class="itembox item-d">D</div>
<div class="about">
<h2>About</h2>
<p>this project</p>
<hr>
</div>
<!-- <img class="hero" src="img/cat-left.png"> -->
<div class="hero"><img src="img/grid.png"></div>
<div class="about-text">
<p>This a demo and study about CSS Grid from Ching Ching Lee, a third year New Media student
from The University of Lethbridge.</p>
<p>I am very interested in web design, I used to apply and follow Flexbox and float methods to write websites but those methods are somehow thicky to create layout that will fit content perfectly in different browsers. Not too far later, CSS Grid is released, and then is supported by most of the mainstream browsers since March, 2017, this new system solves a lot of website layout problems, and also helps me to develop websites in a more structured way. So, I believe it is important to learn the related system to catch up the upcoming trend. </p>
<p id="noFloat">It is time to forget the float, and bring the grid BACK.</p>
<p id="click"><a href="https://codepen.io/allisonching/collections/popular/">Click Here for More Demos | chingchinglee.com</a></p>
</div>
</body>
</html>