아주 쉬운 CSS - grid

CSS Grid에 대해 알아보자!

CSS grid

세로 열과 가로 행을 기준으로 요소를 정렬하는 레이아웃

 

레이아웃

• grid-template-rows
  행의 형태 정의
  ex) grid-template-rows: repeat(3, 1fr);
• grid-template-columns
  열의 형태 정의
  ex) grid-template-columns: repeat(3, 1fr);

간격

• gap
  ex) grid-gap: 0(row) 10px(column);

요소 형태 정의

• grid-column-start / end
  ex) grid-column-start: auto;
  ex) grid-column-end: 2;
• grid-row-start / end
  ex) grid-row-start: span 2;
  ex) grid-row-end: -1;

아래의 코드로 grid 사용법에 대해 알아보자!

See the Pen Untitled by Hyejis (@saramnim) on CodePen.