1. Grids, Floats & Flex Boxes
ATLAS WEB
Grids, Floats & Flex Boxes

2. Project 2 – CSS Zen Garden

3. Fair Use and Creative Commons

4. Box Structure

5. Margins The space between boxes p{ margin-top:20px; margin-left:20px;
margin-bottom:20px;
margin-right:20px; }

6. Margins
The space between boxes p{
margin:20px; }

7. Margins
The space between boxes p{
margin:20px 50px 20px 50px; }

8. Margins
The space between boxes p{
margin:20px 50px; }

9. Padding The space inside of boxes p{ padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px; }

10. Padding
The space inside of boxes p{
padding:20px; }

11. Padding
The space inside of boxes p{
padding:10px 20px 10px 20px; }

12. Padding
The space inside of boxes p{
padding:10px 20px; }

13. Padding + Width & Height
p{ width:100px; height:100px; padding:20px; } Actual width = 120px Actual height = 120px

14. Padding + Width & Height
p{ width:100px; height:100px; padding:20px; border-sizing: border-box; } Actual width = 100px Actual height = 100px

15. Grids

16. Grids 960px

17. Grids 960px

18. Grids 960px
Header Nav Article Sections x3 Footer

19. Float
p{ width:460px; padding:20px; margin:10px; border-sizing: border-box; float:left; clear:both; }

20. Clear Fix
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

21. Flex Box
.flex-container{ display: flex; width: 960px; height:800px; background-color: #cccccc; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; align-content: center; }

22. Attendance Question: Week 5
Share an example of content (does not need to be a website) that adheres to a grid-based layout and benefits from that design structure. What does the grid do to enhance this particular example? What would be lost if the piece did not adhere to a grid?
Post your question to Edmodo under “Lecture Attendance Question Week 5” Your answer should be approximately one paragraph in length.