CSS 기본 6

Grid

2차원적 구조를 가진 정렬방식 (row, column 방향 배치방식 동시에 설정 가능)

[flex] => -작은 단위 레이아웃 구성에 적합
                -디자인, 기획에 변경 가능성이 있는 경우 적합

[grid] => -큰 규모의 레이아웃 구성에 적합
                 -레이아웃 구조가 확실히 잡혀있을 때, 효율적으로 반응형 디자인 구현 가능

Grid 속성

• grid-container => 아이템들을 품고 있는 부모격 박스
• grid-item => container의 자식 요소
• grid-line => (가로)
• grid-number => (세로)

gird-template

grid의 행, 열의 개수 및 크기를 지정

• grid-template-rows => 행의 개수, 크기 지정
• grid-template-columns =>열의 개수, 크기 지정

ex. grid-template-columns : 1fr 100px 2fr

fr

-fraction(분수)의 약자
-grid-template 에서 사용할 수 있는 비율 단위

repeat( )

grid-template 에는 반복함수도 써 줄수 있음

repeat(A,B) => [B규격의 grid-template를 A개 생성한다]

grid-gap

각 아이템 사이에 공백을 지정

                                                                              ↓ ↓ ↓ ↓ ↓ ↓

grid-column & grid-row

grid-item 에 줄 수 있는 속성으로 각각의 아이템이 열과 행 방향으로 얼마의 영역을 차지할 지를 정의

• grid-column: 1 / 4 => grid-number 기준으로 1번째 line부터 4번째 line까지
• grid-row 2 / 3 => grid-line 기준으로 2번째 line부터 3번째 line까지

justify-self & align-self

• grid로 나눈 각 item 영역 (여기서는 3번 영역) 안에서 flex 정렬처럼 정렬 방식을 지정 가능
  ex) justify-self: center