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;