그리드 컨테이너

그리드 설정 - Grid 컨테이너

display

• 그리드 컨테이너 요소를 설정하고 그리드 포멧팅 컨텍스트(격자무늬) 영역을 생성한다.

• flex와 마찬가지로 display: grid;를 적용하는 것이 그리드의 시작이다.

• display: grid;만 입력했을 때 아무런 변화도 일어나지 않는다.

  • <grid> :

    <inline-grid> : block과 inline-block을 생각해보면 이해가 쉽다. inline-block 처럼 적용된다.

    <subgrid> (Level2에서 지원 예정)

    .grid-container {
    display: grid; /* display: inline-grid; */
    }

• <float> <clear> <column> <vertical-align> 속성은 그리드 컨테이너 요소에 적용되지 않는다.

grid-template-rows/ grid-template-columns (명시적)

• 공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정합니다. 각 값은 트랙의 크기를 말합니다.

• 컨테이너의 그리드 트랙의 크기를 지정해 준다.

• 행과 열에 입력하는 크기에 갯수에 맞춰 행과 열이 생성된다.

• 단위 : px, rem, em, %, fr 등

  • auto : 자동 설정 (브라우저 크기에 따라 자동으로 변경됨.)

• rows, columns 타이핑할 때 s 오타 조심하기!!!!!

• 예를들어 2행 4열의 그리드를 만들었을 때 아이템의 갯수가 6개라면 나머지 두 셀은 공백으로 남겨진다.

.grid {
  display: grid;
  grid-template-rows: 20% 100px auto;      /* 3행 */
  grid-template-columns: 40px 100px;       /* 2열 */
  /* grid-template-columns: 80px auto */
  /* grid-template-columns: repeat(5, 1fr); */
  /* grid-template-columns: 150px 1.5fr 2fr */

/* 속기형 */
/* grid-template: row values / column values; */
  grid-template: repeat(5, 20px) / repeat(3, 1fr)
}

grid-row-gap grid-column-gap grid-gap

.grid {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 10px;

  /* 속기형 : row column */
  grid-gap: 10px; /* 행과 열에 동일한 값 적용 */
  grid-gap: 10px 20px;
}

fr(Fraction) 단위

• 컨테이너 전체 크기에서 숫자의 비율대로 트랙을 나눈다

.grid {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr; /* 트랙을 2:1.3:1의 비율로 나눈다. */
}

repeat() 함수

• 반복되는 값을 자동으로 처리할 수 있는 함수이다.

• repeat(반복횟수, 반복하는 값)

  • 반복횟수 : 양수만 가능, 1이상 / 반복하는 값 : 그리드 트랙 리스트(배열)

.grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* grid-template-rows: repeat(2, 1fr 2fr); 
    grid-template-columns: 1fr 2fr 1fr 2fr; */
}

minmax() 함수

• 최소값과 최대값을 지정할 수 있는 함수이다.

• repeat() 함수 내부, 외부에서 사용할 수 있다.

• minmax(최소값, 최대값)

  • 부모 컨테이너의 크기가 최소값 미만으로 작아지지 않도록, 최대값 초과로 늘어나지 않도록 설정한다.

.grid {
  display: grid;

  /* 1, 2행 : 최소값 20px을 가지며 셀 안의 내용이 많아질 수록 트랙의 높이값이 자동으로 늘어난다 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  /* grid-template-rows: repeat(2, minmax(20px, 1fr)); */

  /* 1열 : 최소값 30px을 가지며 셀 안의 내용이 많아질 수록 트랙의 너비의 값이 자동으로 늘어난다.
       2, 3열 : 1열의 너비를 제외한 나머지 공백의 공간을 1:1의 비율만큼 나눠가진다. */
  grid-template-columns: minmax(30px, auto) repeat(2, 1fr);
}

grid-auto-rows grid-auto-columns (암시적 implict)

암시적인 그리드 트랙이란?

• 사용자가 설정하지 않은 임의의 트랙으로, 사용자가 명시적으로 grid-template-rows / grid-template-columns 속성을 설정하지 않은 나머지 그리드 트랙을 가리킨다.

• 즉, 아이템 박스는 생성되어 있으나 grid-template-rows / grid-template-columns 속성이 설정되어 있지 않은 트랙을 말한다.

• 단위 : px, rem, em, %, fr 등

• 속기형 없음

• grid-auto-columns : https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-columns

  grid-auto-rows : https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-rows

.grid {
  display: grid;

  grid-auto-rows: minmax(100px, auto);

  /* min-content : 컨텐트의 개수 만큼 공간박스 설정 */
  grid-auto-columns: min-content;
}

grid-auto-flow

• 아이템이 자동 배치되는 흐름을 결정하는 속성입니다.

  • row (기본값) : 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘

  • column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘

  • dense

    • 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘

    • row와 column에 따라 기준이 달라진다.

  • row dense

  • column dense

<section class="grid-contianer">
  <div class="item-a">item-a</div>
  <div class="item-b">item-a</div>
  <div class="item-c">item-a</div>
  <div class="item-d">item-a</div>
  <div class="item-e">item-a</div>
</section>

.grid-contianer {
  display: grid;
  grid-template: repeat(5, 60px) / repeat(2, 30px);
  grid-auto-flow: row;
}

.item-a {
  grid-row: 1 / 3;
  grid-column: 1;
}

.item-e {
  grid-row: 1 / 3;
  grid-column: 5;
}

justify-items align-items 아이템 내부 콘텐츠 가로/세로 정렬

• justify-items : 행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정열한다.

• align-items : 열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬한다.

• 이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용된다.

• 값

  • stretch(기본값) : 그리드 영역 전체 너비를 채움

  • start : 그리드 영역의 시작점에 콘텐츠 정렬

  • center : 그리드 영역의 끝점에 콘텐츠 정렬

  • end : 그리드 영역 중앙에 콘텐츠 정렬

justify-content align-content : 아이템 트랙 가로/세로 정렬

• justify-content : 행(row) 축을 따라 아이템 트랙을 정렬한다.

• align-content : 열(column) 축을 따라 아이템 트랙을 정렬한다.

• 그리드 아이템들의 너비의 총 합이 그리드 컨테이너의 크기보다 작아야 한다.

• 그리드 아이템들에 설정되어 있는 너비값의 단위가 같아야 한다. (px 등)

• 값

• stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움

• start : 그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬

• center : 중앙에 아이템 트랙을 정렬

• end : 끝점에 아이템 트랙을 정렬

• space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(행)이 좌/우 공간으로 나눔 (양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)

• space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(행) 사이 공간을 나눔

• space-evenly : space-around와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름

.grid {
  display: grid;

  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}

place-items/ place-self 속기형

• place-items 속성은 align-items 과 justify-items의 속기형이다.

• place-self 속성은 align-self와 justify-self의 속기형이다.