1. Why Use CSS grid?

이번부터는 brackets.io https://sir.kr/so_css/34  와 Git도 사용합니다. https://sir.kr/so_git

git clone  https://github.com/iamshaunjp/css-grid-playlist 

cd css-grid-playlist

git checkout lesson-1

start brackets . 

3가지 방식으로 만들수 있습니다. File>Live Preview Ctrl+Alt+P를 누르시면  디폴트 브라우저에서 나옵니다.

floats.html을 클릭한 후에 라이브 뷰로

flex.html   flexbox로

grids.html  CSS Grid로

아래와 같이 그리고 몇개 더...

2. Columns  

gird-template-column:

레슨1에서 파일 수정을 했을 경우에는 checkout이 안되니.

git checkout lesson-2 --force  로..

brackets에 git 옵션을 설치하니 왼쪽 옆쪽으로 각각의 브랜치가 나오는 것 같은데. (아직 사용법은)

일단 모든 브랜치를 checkout해 놓으니 아래와 같이 됨..

3. Rows

grid-template-row:

grid-auto-row:

grid-column-gap:

grid-row-gap:

grid-gap:

4. Grid Lines

grid-column-start:

grid-column-end:

grid-column: start/end;

grid-row: start/end;

5. Nested Grids

grid-column: span 3;