+
+
+
+
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
+
+
+
+
The Basics of Grid Layout
+
+ Grid layout is a display type for organizing a webpages content. While flexbox excels in quick and responsive layouts, Grid is
+ top of the line for precise placement of elements on a (surprise, surprise) grid.
+
+
+
+
+
+
+
+
+
Diverse Site Layouts
+
+ Grid is unmatched in it's ability to create unique site layouts with little overhead. While unique layouts are possible with flex, a
+ designer may often find themselves fighting with their code or needing to compromise. Grid is much more powerful when creating ridgid layouts
+ where the elements relative positions are meant to stay consistent. In class we did the holy grail layout, as seen above but that's only the beginning.
+ A layout such as this would be possible with flexbox, but would require much less elegant code.
+
+
+
+
+
+
+
+
Simplicity of Use
+
A layout like this, with many different sized elements, can prove to be difficult to create using flexbox. Creation will call for many
+ nesting and unesting divs and things get sloppy and complex very fast. If there were even more unaligned elements it could be even more difficult.
+ With grid, it's just a matter of creating a grid that works for you and then placing your elements where you want them.
+
+
+
+
+
+
+
+
Element sizing
+
+ As long as your element fits between the lines (which you set), you can set each element to whatever size you want. This makes creating
+ asymmetrical designs very simple. However, grids are not malleable the way flexbox is. Upon resizing contents of a grid will remain in the
+ same relative position within the grid. If you want to change the way in which contents organize themselves on the fly, media queries are the only method.
+
+
+
+
+
+
+
Grid Within a Grid
+
+ Grids aren't an all or nothing game. Like all CSS display types, you can use grid at any point you choose and stop any time you want. In this
+ example, I have created a grid within a grid to show that more complex elements can go into grids, including other grids.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Consistent Lines
+
+ All elements within a grid system share the same grid lines. as long as the user is careful to not create an instance where lines relative
+ distance from each other changes upon resizing (for example, if one track is set to 25% of the element's total size and the other is set to 50px.
+ in that example the the 25% track will grow with the element but the 50px one will not) they can use that to their advantage. In this example
+ grids are used to place city markers in certain area's of a map of CT. They will remain in the same spot in relation to the CT map no matter what
+ size the container is.
+
+
+
+
+
+
+
Grids and 3D Space
+
+ While we spend most of our time focusing on the x and y axis of our grids, there is an element of verticality. Items stack on top of each other
+ in the order in which they exist within the HTML document by default, but element's z-index value can be changed by css. In the above demo, hovering
+ over each element will bring it to the top of the stack.
+
+
+
+
+
+
+
Fibonocci's Grid
+
+ This is not a Fibonocci Spiral. I designed this site in such a way that all the grid examples exist in perfectly square containers. That
+ said, it follows the same logic, and making it accurate would just be a matter of biscecting each grid at a place that is not the center. This
+ image was created by putting many grids within themselves.
+
+
+