[CSS] Grid의 속성 정리 (Grid Garden)

https://snupi.tistory.com/148

[CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY)

 

---

길이 조정하기

부모 태그에 display: grid;

 

grid-template-rows: {row1의 높이} {row2의 높이} {...} ...
grid-template-columns: {column1의 너비} {column2의 너비} {...} ...
  --> grid-template: {-rows ~} / {-columns ~}
 
--> `1fr`: 전체 길이의 한 부분; fraction
--> `minmax({min}, {max})` 값
--> `min-content`/`max-content` 값
  min-content: 요소의 item에 대한 min 길이
  max-content: 요소의 item에 대한 max 길이
--> `repeat(n, 값)` 값으로 반복표현 가능
  --> `repeat(auto-fit/auto-fill, 값)`
    auto-fit: 유동적인 사이즈로, 전체 길이에 맞게 설정됨
    auto-fill: 정확한 사이즈로, 빈공간을 두도록 설정됨
 
grid-auto-rows: 
  요소가 지정 개수보다 많아질 때의 row의 높이
grid-auto-flow: row(기본값), column,
  ... 요소가 지정 개수보다 많아질 때의 늘어나는 방향
grid-auto-columns: (flow가 column일 때) 
  요소가 지정 개수보다 많아질 때의 column의 너비
 
column-gap: ... 열끼리의 gap
row-gap: ... 행끼리의 gap
  --> gap: 행, 열끼리의 gap

 

• grid의 gap에 color 값은 따로 없다 --> grid 부모 박스의 background-color 값을 바꾸는 방법

 

---

레이아웃 라인 지정하기

(template 아래) 행/열 - 시작/끝 라인 속성은 그리드의 자식 요소에 적용시킨다

 

grid-template-areas:
  "header header header header"
  "content content content nav"
  "content content content nav"
  "footer footer footer footer"
  // 자식 태그에 `grid-area: header;` 로 지정해주어야 한다
  --> grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
  로 표현 가능
 
// ! 자식 요소에 !
grid-column-start: 열 시작 라인 지정 (1: 첫번째 줄 ~)
grid-column-end: 열 끝 라인 지정 (~ n+1: 마지막 줄)
grid-row-start: 행 시작 라인 지정 (1 ~)
grid-row-end: 행 끝 라인 지정 (~ n+1)
  --> `grid-column: n / m;`, `grid-row: n / m;`
  --> `grid-area: {row-start} / {column-start} / {row-end} / {column-end};`
  --> m이 -1이라면 끝 라인, -2라면 끝에서 두번째 줄, ...
  --> `span n` 으로 표현 가능; n개의 공간 차지

 

• 부분부분 길이 넓은 grid --> 부모:nth-child(x), 부모:nth-child(y), ... { grid-column-start: span 2; }

 

---

Content(; 그리드) 와 Item(; 텍스트) 의 정렬하기

~-self 속성은 그리드의 자식 요소에 적용시킨다

 

align-content: row와 column 틀 안에서 content 수직 정렬 (높이값 확인!)
justify-content: row와 column 틀 안에서 content 수평 정렬
  --> `place-content: {align-content} {justify-content}
 
align-items: row와 column 틀 안에서 item 수직 정렬 (높이값 확인!)
justify-items: row와 column 틀 안에서 item 수평 정렬
  --> `place-items: {align-items} {justify-items}
 
// ! 자식 요소에 !
align-self: row와 column 틀 안에서 수직 정렬 (높이값 확인!)
justify-self: row와 column 틀 안에서 수평 정렬
  --> `place-self: {align-self} {justify-self}

 

---

CSS GRID GARDEN

https://cssgridgarden.com/#ko

Grid Garden