[Day 14] CSS Grid

grid

부모요소 속성

display: grid(필수)

 

grid-template-columns:

grid-template-rows:

 길이단위(%,px, em) 혹은 fr(비율) 가 오거나

repeat(개수, 길이단위(%,px, em) 혹은 fr)로 사용 가능하다.

 

ex) 1fr 5fr : 6등분으로 나누고 각각 1/6, 5/6

 

위 두 속성을 단축=> grid-template

 

자식요소 속성

-grid-column-start/end

-grid-row-start/end

 

위 속성 단축

=> grid-column, grid-row

더 단축==> grid-area:

grid-row-start/grid-column-start/grid-row-end/grid-column-end

(negative 속성도 가능- 이경우 순서가 거꾸로)

 

order

모든 그리드 아이템은 디폴트로 order:0을 가진다. 속성 밸류값은 음수도 가능하다.

 

아래는 grid garden게임으로 연습해본 그리드 예제들!

https://codepip.com/games/grid-garden/

Grid Garden - A game for learning CSS grid

 

grid-template-columns: 50px repeat(3, 1fr) 50px;

 

grid-template: 1fr 50px / 1fr 4fr;

 

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

 

배우고 느낀 점

 

 

맨날 flex에 지배당해서 flex만 쓰다가 이번에 처음 grid를 배웠는데, 아직 익숙해지는데 시간이 많이 걸릴 것 같다 ㅜㅠ

그리드에 특화된 정렬법도 다시 공부해야 되고.. 자유자재로 그리드를 활용할 수 있기 위해서 예제들도 많이 많이 봐야 겠다. (오늘 grid 복습하느라 flex-basis, grow, shink 정리를 못했다 ㅠ 내일 수업 듣고 빠르게 정리할 것이다!)

그리드에 대해 추가로 정리할 내용이 있으면 즉각즉각 이 포스팅에다 업데이트하기! 😀