display 속성 - grid

display: grid

2차원 레이아웃. 행 또는 열을 제어하는 flex와는 다르게 행과 열을 동시에 제어함

• track : 행과 열의 통칭

• line(gutter) : 트랙 사이의 여백(gap)

• cell : 나눠진 하나의 공간

• area : 셀이 여러개 모인 영역
  
  
  

grid container 속성

레이아웃 구성

.container {
  display: grid;
  grid-template-rows: 100px 100px 200px;
  grid-auto-rows: 300px;
  grid-template-areas: 
  "a a b"
  "a a b"
  "c c c";
  gap: 20px;
}

• grid-template-rows(column) : 생성할 행/열의 개수

• grid-template-areas : grid-area로 지정된 이름을 참조해 레이아웃 구성

• grid-auto-rows(column) : 명시된 행/열보다 많은 아이템이 있으면, 즉 암시된 행/열이 있으면 입력한 사이즈를 부여

• gap : 각각의 아이템간의 간격 지정

• row(column)-gap : 행과 행/열과 열 사이의 간격 지정

정렬/배치

.container {
  display: grid;
  align-items: center;
  justify-content: space-around;
  place-content: center space-around;
}

• align-content : 교차축에 대한 정렬

  • normal(stretch) : 기본값

• justify-content : 주죽에 대한 정렬

• place-content : 교차축과 주축을 기준으로 정렬하는 단축속성

• align/justify/place-items : item이 cell보다 작을경우 각각의 cell 내에서 정렬

---

grid items 속성

정렬

.items {
  align-self: center;
  justify-self: end;
  place-self: center end;
  order: 1;
  z-index: -1;
}

• align-self : 해당 item만 개별적으로 교차축 정렬

• justify-self : 해당 item만 개별적으로 주축 정렬

• place-self : 해당 item만 교차축과 주축으로 정렬하는 단축속성

• order : 정렬 순서 지정. 숫자가 작을 수록 왼쪽에 정렬

• z-index : 쌓임 순서 지정. 숫자가 클 수록 위에 쌓임

배치

.items {
  grid-row-start: 2;
  grid-row-end: -1;
  grid-row: 2/-1;
  grid-column: span 3;
  grid-area: a;
}

• grid-row(column)-start : 해당 행/열축에서 item이 시작됨

• grid-row(column)-end : 해당 행/열축에서 item이 끝남

  • -1 : 가장 끝라인에서 끝남

• grid-row(column) : start/end : start line과 end line을 한번에 입력해 배치하는 단축속성

• grid-row(column) : span n : 시작지점을 바꾸지 않고 영역보다 크지 않은 선에서 n셀만큼 주축/교차축 방향으로 크기를 확장시킴

• grid-area : name : 해당 cell에 이름을 부여함

---

grid 함수

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: minmax(200px, 1fr) minmax(100px, 1fr);
  grid-template-columns: fit-content(200px) fit-content(100px);
}

• repeat : 셀 너비와 반복횟수 지정

• minmax : 셀의 최소,최대 너비 지정

• fit-content : content의 너비보다 커지지 않는 선에서 최대 너비 지정

---

grid 단위

• fr : fraction의 약자로 사용가능한 공간에 대한 비율

• min-content : 요소의 최소한의 너비. 제일 긴 단어 기준

• max-content : 요소의 최대한의 너비

• auto-fill : 브라우저가 계산해서 container 내 요소가 넘치면 자동으로 줄바꿈 처리

• auto-fit : 브라우저가 계산해서 container 내 요소가 넘치면 자동으로 줄바꿈 처리. 단 남는 공간은 축소함