[CSS] Grid Layout

✔️ grid 속성

• flex 처럼 쉽게 행과 열 형태로 항목 무리를 배치하는 레이아웃 시스템입니다.

 

https://getcodecamp.com/2020/07/12/css-grid-layout/

• container : display: grid; 속성을 적용하는 grid의 전체 영역입니다.
• item : grid container의 자식 요소들입니다.
• track : grid의 행(row) 또는 열(column) 입니다.
• cell : grid item이 들어가는 한 칸을 가리키는 말입니다.
• line : grid cell을 구분하는 선입니다.
• number : grid line의 각 번호입니다.
• gap : grid cell 사이의 간격입니다.
• area : grid line으로 둘러 쌓인 사각형 영역으로 grid cell의 집합입니다.

 

📌 Flex Layout 과 Grid Layout의 차이점

• Flex : 한 방향 레이아웃 시스템 (1차원)
• Grid : 두 방향(가로, 세로) 레이아웃 시스템 (2차원)

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

✔️ 시작해보기

• grid로 레이아웃 할 요소(grid item)의 부모 요소(grid container)에 display 속성값을 지정해야 합니다.

container {
    display: grid;
}

 

✔️ grid container에 적용하는 속성

 

📌 grid-template-rows 와 grid-template-columns

• 컨테이너에 grid track의 크기들을 지정해주는 속성입니다.
• 지정해준 갯수만큼 적용되며 그 이상의 요소는 컨텐츠의 크기만큼 자동으로 지정됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

+ fr

• fr 은 fraction 의 준말로 앞에 적은 숫자대로 '비율'을 나눠줍니다.

 

+ repeat()

• repeat 함수는 repeat(반복횟수, 반복값)으로 반복되는 값을 자동으로 처리해주는 함수입니다.
• 위 예제에서 repeat(3, 1fr)은 1fr 1fr 1fr 과 같습니다.

 

📌 grid-auto-rows 와 grid-auto-columns

• grid-template 속성이 통제하지 못하는 grid track의 크기들을 지정해주는 속성입니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

+ minmax()

• 최소값과 최대값을 지정할 수 있는 함수입니다.
• 위 예제에서 minmax(100px, auto)는 최소로 100px 을 유지하고 최대는 자동(auto)으로 늘어난다는 것입니다.

 

📌 auto-fill 과 auto-fit

• column의 갯수를 미리 정하지 않고 부모 요소의 크기만큼 최대한 셀을 채웁니다.
  • auto-fill : 부모 요소 내에서 설정된 cell의 크기만큼 최대한 많이 채웁니다.
  • auto-fit : 부모 요소 내에서 cell들의 크기를 최대한 늘려 채웁니다.
• repeat() , minmax() 와 함께 사용해야 합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 gap

• grid cell 사이의 간격을 설정합니다.
  • gap: row값 column값 : 행과 열의 값 따로 한꺼번에 지정할 수 있습니다.
  • row-gap, column-gap : 행과 열을 각각 지정할 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 grid-template-areas

• 각 영역(area)에 이름을 붙여 미리 구조를 정해둔 후 grid item을 배치할 때 사용합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 grid-auto-flow

• grid item이 자동 배치되는 흐름을 결정하는 속성입니다.
  • row : 각 행 축을 따라 차례로 배치
  • column : 각 열 축을 따라 차례로 배치
  • row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 영역을 매웁니다.
  • column dense : 각 열 축을 따라 차례로 배치, 빈 영역을 매웁니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 align-items 와 justify-items

• align-items : grid item들을 세로(column축) 방향으로 정렬합니다.
• justify-items : grid item들을 가로(row축) 방향으로 정렬합니다.
  • stretch : 기본값으로 cell에 맞춰 item 들을 쫙 폅니다.
  • center : item을 cell의 가운데로 정렬합니다.
  • start : item을 cell의 시작부분으로 정렬합니다.
  • end : item을 cell의 끝부분으로 정렬합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 place-items

.container {
  place-items: align-items값 justify-items값;
}

• align-items 와 justify-items를 한 번에 사용할 수 있는 단축 속성입니다.
• 한 개의 값만 사용하면 두 속성 모두에 적용됩니다.

 

📌 align-content 와 justify-content

• 컨테이너 내에서 grid item들을 통째로 정렬할 때 사용합니다.
  • stretch : 기본값으로 컨테이너와 cell에 맞춰 item 들을 쫙 폅니다.
  • center : item들을 컨테이너의 가운데로 정렬합니다.
  • start : item들을 컨테이너의 시작부분으로 정렬합니다.
  • end : item들을 컨테이너의 끝부분으로 정렬합니다.
  • space-between : item들을 양 끝과 가운데로 정렬합니다.
  • space-around : item들마다 양 끝에 동일한 간격을 둬서 정렬합니다.
  • space-evenly : 양 끝과 item들 사이에 동일한 간격을 둬서 정렬합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 place-content

.container {
  place-content: align-content값 justify-content값;
}

• align-content와 justify-content를 한 번에 사용할 수 있는 단축 속성입니다.
• 한 개의 값만 사용하면 두 속성 모두에 적용됩니다.

 

✔️ grid item에 적용하는 속성

 

📌 grid-column 과 grid-row

• line의 number를 활용해 cell의 영역을 지정합니다.
  • grid-row-start 와 grid-row-end 를 사용해 시작 번호와 끝 번호를 각각 지정할 수 있습니다.
  • -1 과 같이 음수를 활용해 거꾸로 매겨진 number도 사용할 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

+ span x

• table 의 colspan과 rowspan 속성과 비슷하며 span 뒤에 숫자만큼을 범위로 사용합니다.

 

📌 grid-area

.griditem:nth-child(1) {
  grid-area: 1 / 1 / span 2 / span 2;
}

• grid-column 과 grid-row를 한 번에 지정할 수 있습니다.
• 순서대로 grid-row-start / grid-column-start / grid-row-end / grid-column-end 입니다.

 

📌 align-self 와 justify-self

• align-self : 해당 item을 세로(column축) 방향으로 정렬합니다.
• justify-self : 해당 item을 가로(row축) 방향으로 정렬합니다.
  
  • center : item을 cell의 가운데로 정렬합니다.
  • start : item을 cell의 시작부분으로 정렬합니다.
  • end : item을 cell의 끝부분으로 정렬합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 place-self

.item {
  place-self: align-self값 justify-self값;
}

• align-self와 justify-self를 한 번에 사용할 수 있는 단축 속성입니다.
• 한 개의 값만 사용하면 두 속성 모두에 적용됩니다.

 

📌 order

• 각 item 들의 시각적 순서를 지정할 때 사용합니다.
• 작은 숫자일수록 먼저 배치됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 z-index

• position의 z-index처럼 item의 z축을 정렬할 때 사용합니다.
• 숫자가 클 수록 위로 올라옵니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📄 참고

https://www.yalco.kr/

https://developer.mozilla.org/

https://studiomeal.com/archives/533