https://cssgrid.io/

 

이메일 입력하면,  컨퍼메이션 메일로 오고 패스워드 세팅하면 CSS 비디오 강의와 자료를 볼수 있습니다.

 

Wesbos의 다른 강의도 볼수 있는곳

https://wesbos.com/courses/

 

CSS Grid에 대한 강의에 대한 github source https://github.com/wesbos/css-grid

 

4. node.js, firefox developer version의 layout 기능 사용방법

5. Implicit, Explicit 설명  grid로 지정이 되면 FF에서 보이는 선이 다르게됨

6. grid-auto-flow: row와 column

7. %를 사용하면 gap 까지 포함되서 오버 됨.  fr 을 사용함. fr은 gap빼고 그냥 남는 것으로 나눠줌.

8. repeat 사용법 repeat

grid-template-columns: 100px repeat(2, 1fr auto) 200px repeat(2, 5fr); 는 몇개의 컬럼이 생길까요?

9. span 에 대해서

10.  grid-column-start, grid-column-end, grid-column,  grid-row 등 -1의 위치도.. implicit 와 explicit에 따른 -1의 위치

11.  문제 풀이

/* Make the grid 10 columns wide, every other taking up twice the free space */

/* Make the grid have 10 explicit rows, 50px high each */

/* With Item 1, start at col 3 and go until 5 */

/* With Item 2, start at col 5 and go until the end */

/* Make Item 5 double span 2 cols and rows */

/* Make Item 8 two rows high */

/* Make Item 15 span the entire grid width */

/* Make item 18 span 4 widths, but end 9 */

/* Make item 20 start at row 4 and go for 3 */

12. auto-fit, auto-fill의 차이점

13. minmax (150px, 1fr)  화면사이즈가 작아질때의 차이짐(auto-fit, auto-fill), fit-content도(언제사용?)

14. grid-template-areas에 대해서

 

 

 

링크를 클릭하면 jsfiddle에 대해서 데모를 볼수 있습니다.

2. Starter Files and Tooling Setup
3. CSS Grid Fundamentals
4. CSS Grid Dev Tools   
5. CSS Grid Implicit vs Explicit Tracks   
6. CSS grid-auto-flow Explained
7. Sizing tracks in CSS Grid
8. CSS Grid repeat function
9. Sizing Grid Items
10. Placing Grid Items
11. Spanning and Placing Cardio
12. auto-fit and auto-fill
13. Using minmax() for Responsive Grids
14. Grid Template Areas:
    • Area Line Names
    • Areas
15. Naming Lines in CSS Grid
16. grid-auto-flow dense Block Fitting
17. CSS Grid Alignment + Centering
18. Re-ordering Grid Items
19. Nesting Grid with Album Layouts
20. CSS Grid Image Gallery
21. Flexbox vs CSS Grid:
    • Axis Flipping
    • Controls on Right
    • Flex on Item
    • Perfectly Centered
    • Self Control
    • Stacked Layout
    • Unknown Content Size
    • Unknown Number of Items
    • Variable Widths on Each Row
22. Recreating Codepen
23. Bootstrappy Grid with CSS Variables
24. Responsive Website
25. Full Bleed Blog Layout

 

아래 github는 위의 내용을 3부터 텍스트로 정리한 것 같습니다.

 

github에 https://github.com/koakekuna/css-grid