grid 와 flex
flex•
비교적 작은 단위의 레이아웃 구성에 적합하다.
•
작업 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합하다.
•
grid•
큰 규모의 레이아웃 구성에 적합하다.
•
레이아웃 구조가 확실하게 잡혀있는 경우 효율적으로 반응형 디자인을 구현할 수 있다.
•
모든 브라우저에서 지원하지 않는다.
grid 속성
grid-container | grid가 적용된 요소 | grid-line | grid-item 사이의 경계 |
grid-item | grid가 적용된 요소의 자식 요소들 | grid-number | 해당 grid-line이 몇번째 line인지를 의미 |
grid-template
grid의 행 & 열의 개수 및 크기를 지정한다.grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px
CSS
복사
단위 : fr•
fraction(분수)의 약자입니다.
•
grid-template에서 사용할 수 있는 비율 단위입니다.
repeat()repeat(a, b) : b규격의 grid-template을 a개 생성한다
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr;
CSS
복사
grid-column & grid-row
각각의 grid-item이 얼마만큼의 영역을 차지할 지 정의
예시
/* 시작점이 되는 grid-number와 종료지점이 되는 grid-number를 입력한다. */
grid-column : 1/ 4;
grid-row : 2 / 3;
CSS
복사