Browse Source

Summary of CSS Grid Course

Finished chapters 1-3.
tomi 6 years ago
parent
commit
342d012de9
1 changed files with 16 additions and 0 deletions
  1. 16 0
      CSS-Grid/course.md

+ 16 - 0
CSS-Grid/course.md

@@ -0,0 +1,16 @@
+# 02 - Starter Files and Tooling
+* Firefox has good built-in tools to analyze CSS grid
+* Node can help serve HTML files and reload them on change (browser-sync module)
+* Wes Bos' repository: https://github.com/wesbos/css-grid.git
+* Use Emmet for HTML and CSS
+* TODO: Show list of VS code extensions.
+* CSS: use `box-sizing: border-box` as it includes padding and borders
+
+# 03 - Fundamentals
+* Grid organizes page in rectangular grid cells.
+* Implicit and explicit rows/columns
+* Parent container needs to be `display: grid;`
+    * makes direct children grid items
+* `grid-template-columns: (size) (size)...` defines explicit columns
+    * use `auto` to auto size columns to use up rest of the screen width
+* `grid-gap: (size)` separates columns and rows with