[HTML, CSS] Grid

 

 

1. Grid

Grid

: 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식

: grid item 배치, 정렬 → grid container 내부 행과 열의 상호작용을 통해 결정

: grid 사용하기

  display: grid;   (→ 기본적으로 block 요소)

  display: inline-grid;   (→ inline 형태로 만들고 싶을 때)

각각의 item들의 높이 일정 (200px씩)

 

 

Grid Container

: grid 방식으로 레이아웃을 결정할 요소

• display
• grid-template-rows
• grid-template-coulmns
• grid-template-areas
• grid-template
• row-gap
• column-gap
• gap
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow
• grid
• align-content
• justify-content
• place-content
• align-items
• justify-items
• place-items

 

 

Grid Item

: grid container 안에서 grid 방식으로 배치되는 요소

• grid-row-start
• grid-row-end
• grid-row
• grid-column-start
• grid-column-end
• grid-column
• grid-area
• align-self
• justify-self
• place-self
• order
• z-index

 

 

 

2. Grid Container

grid-template-rows

: grid container의 트랙 중 행의 아이템들의 크기를 지정

이미 5개가 나열된 상태에서 grid-template-rows: 200px; 하나만 주어지게 되면, 맨 위에 것만 적용

grid-template-rows: 200px 200px 200px;

 

 

grid-template-columns

: grid container의 트랙 중 열의 아이템들의 크기 지정

: 단위는 px, %, ..등 사용 가능

: 기본값) none

cf.) 트랙 = 행 or 열 중 하나

grid-template-columns: 100px 100px;

grid-template-columns: 100px 1fr;

cf.) fr (fraction) : 사용할 수 있는 공간(남은 공간)에서 비율로 나누겠다 / 1fr 2fr == 1:2비율

 

cf.) 두개 같이 적용

5행 2열  / 아이템은 5개 → 왼쪽 위에서부터 채워지고 나머지 공간은 비워진 상태

 

 

gap (grid-gap)

: grid item 사이의 간격을 지정

: grid: 10px; → 행, 열 간격 똑같이 지정 / grid: 10px(행) 10px(열); → 각자 따로 지정  둘 다 가능

: row-gap, column-gap 의 단축속성

행, 열 같이 적용 / 행 열 각각 적용

 

 

cf.) 트랙(행, 열) 관련 함수

repeat()

 

 

minmax()

: 여유 공간이 없으면 → 100px까지만 줄어들고 / 여유 공간이 있으면 → 200px까지만 늘어난다

 

: 공간이 남는 경우 → 최댓값으로 fr 사용 or auto 키워드 사용할 수 있음

 

 

auto-fill & auto-fit

auto-fill / auto-fit : 첫번째 자리에 사용할 수 있음

 

auto-fill

: 트랙의 최소 길이의 합 <  컨테이너의 길이 → 빈 공간을 남긴다

100px이 아이템의 갯수만큼 늘어날 수 있음 / 5개니까 5개까지 늘어남

 

 

auto-fit

: 반대로 컨테이너의 빈공간을 채운다

 

fr이나 auto로 설정하지 않고 px처럼 고정값을 넣어버리면, 무조건 빈공간을 채우는 것은 아님

 

 

grid-template-areas

: grid 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있다

: 이름을 여러개 작성할 수 있는데, “”하나당 한 행

이름을 많이 써줄수록 영역이 넓어짐

물리적으로 떨어져 있으면 적용이 되지 않음

빈칸을 만들어 주고 싶을 때는 .을 사용 /  .없이 빈칸으로 냅두면 위 아래와 열 수가 맞지 않아서 적용이 되지 않음

 

 

align-items

: flexbox 방식에서와 유사한 역할

: 컨테이너 행 트랙의 높이를 기준 → grid item 배치 결정

: 컨테이너가 자신이 품고 있는 아이템들의 배치 방법을 결정

• stretch : 기본값 / 행의 높이만큼 늘어난다
• start
• end
• center

 

 

justify-items

: 수평축(행)을 따라 그리드 아이템 정렬하고자 할 때 사용하는 속성

: grid container에 지정

: 아이템이 할당된 열 방향 너비가 기준

• stretch : 기본값
• start
• end
• center

 

 

align-content & justify-content

: flexbox 방식과 유사하게 사용

: 컨테이너의 수직축, 수평축 에서의 아이템 정렬방식 결정

: 컨테이너의 여유 공간이 있을 때 사용

 

- align-content

: 열 방향으로의 정렬방법 결정

cf.) align-items(행 안에서 조절) / align-content(컨테이너 전체) → 헷갈릴 이유가 없음

• start
• end
• center
• space-between
• space-around
• space-evenly

 

 

- justify-content

: 행 방향으로의 정렬방법 결정

• start
• end
• center
• space-between
• space-around
• space-evenly

 

 

 

 

3. Grid Item

grid-column & row

: grid-column, grid-row 속성 → grid container의 줄 번호를 이용해 아이템을 배치

: 시작하는 부분, 끝 부분 경계선 하나하나마다 번호가 지정되어 있다.

: grid-row: 1/3;  (줄번호 1부터 3까지 차지하게끔 한다)

: grid-column: 1/4;  (줄번호 1부터 4까지 차지하게끔 한다)

 

 

grid-row-start, -end & grid-column-start, -end

시작, 끝을 각각 지정해주는 것 (grid-row, grid-column는 start랑 end가 같이 있는 것)

 

 

grid-area

: grid 영역 (아이템)의 이름을 지정할 때 사용하는 속성

: 이름을 부여할 때 문자열에 따옴표”” 없이 작성

 

 

align-self

: 각각의 grid item이 어떤 식으로 배치될 것인지 스스로 결정

: 속성값은 align-items랑 동일

• stretch
• start
• end
• center

 

 

justify-self

: 수평축(행)을 따라 grid item을 정렬하고자 할 때 사용하는 속성

: 각각의 그리드 아이템에 지정

: align-items & align-self의 관계와 유사

• stretch
• start
• end
• center

 

 

[참고 사이트]

- 정리 : https://d2.naver.com/helloworld/8540176

- 연습 : https://grid.layoutit.com/