Grid 간단 정링

1분 코딩님의 강의를 보고 간단하게 정리했습니다.

Grid 팁

Grid는 두 방향(가로-세로) 레이아웃 시스템이다. (2차원)
파이어폭스를 사용하면 조금 더 레이아웃을 편리하게 짤 수 있다.

자주 사용!

auto-fill 와 minmax로 미디어쿼리를 대체할 수 있다! (오..)

• repeat, minmax 함수
• auto-fill
• auto-fit

코드

• repeat,minmax함수 사용 예시
  (반복,최소최대값 설정)

grid-template-columns: repeat(3, minmax(220px, auto));

• auto-fill
  너비에 따라 요소를 자동으로 배치해준다.
  But! 전체 너비에비해 Element가 적으면 영역이 남는다. 이럴때 사용하는게 auto-fit.

grid-template-columns: repeat(auto-fill, minmax(220px, auto));

• auto-fit
  남는 여백을 알아서 채워준다.

grid-template-columns: repeat(auto-fit, minmax(220px, auto));