[KUIT 3기 Web] 2주차(2) - CSS grid, grid parent, grid children

• display: grid; 격자 모양으로 보여준다.

• grid parent 속성과 grid children 속성이 따로 있다.
• grid track : grid의 행 또는 열
• grid cell : grid 한 칸

Grid parent properties

• display : inline-grid는 grid에 inline 속성을 부여해 준다.

.container {
  display: grid | inline-grid;
}

• grid-template-rows, grid-template-columns : grid track의 크기를 지정해준다.
  • 숫자 값만 넣어도 되며, 다양한 이름을 지원한다.
  • 1fr 1fr 1fr 은 fraction 약자로, 비율을 의미한다. 1:1:1 비율로 나눠준다.

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
  1fr 1fr
  minmax(10px, 1fr) 3fr
  repeat(5, 1fr)
  50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
  min-content 1fr min-content
  100px 1fr max-content
  */
}

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

• repeat : 반복되는 부분이 포함된 경우 repeat()으로 간략하게 반복할 수 있다.

.container {
    grid-template-columns: repeat(3, 20px [col-start]);
}

repeat(auto-fit, minmax(250px, 1fr));

• auto-fill, auto-fit은 열, 행 개수를 미리 지정하지 않고 너비가 허용하는 한 최대한 셀을 채운다.
• auto-fill: 가로로 늘렸을 때, 보이지 않는 셀을 만들어 채운다.
• auto-fit: 가로로 늘렸을 때, 각 셀을 늘려서 채운다.
  • minmax() : 최솟값, 최댓값 범위 내에서 값을 유연하게 처리한다. minmax(min, max) 일 때, min보다 크거나 같고 max보다 작거나 같은 범위.

.grid-container {
  display: grid;
  /* minmax() 함수 사용법 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  grid-template-columns: minmax(30px, auto) repeat(3, 1fr);
}

• grid-template-areas : 다음 그림처럼 각 영역을 지정해서 구분할 수 있다.

.item-a {
    grid-area: header;
}
.item-b {
    grid-area: main;
}
.item-c {
    grid-area: sidebar;
}
.item-d {
    grid-area: footer;
}
.container {  
    display: grid;  
    grid-template-columns: 50px 50px 50px 50px;  
    grid-template-rows: auto;  
    grid-template-areas:  
    "header header header header"  
    "main main . sidebar"  
    "footer footer footer footer";  
}

• grid-template
• row-gap, column-gap, grid-column-gap, grid-row-gap

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

• gap, grid-gap : grid 접두사는 오래된 방식으로, 현재는 제거되었다.

.container {
  /* standard */
  gap: <grid-row-gap> <grid-column-gap>;

  /* old */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  gap: 15px 10px;
}

 

• justify-items, align-items : flex와 동일

 

• place-items : <align-items> / <justify-items> 속성

 

• justify-content, align-content : grid 전체 크기가 grid container 크기보다 작을 때 내부에서 grid 자체를 정렬할 수 있다.
  • justify-content : 수평 축 방향
  • align-content : 수직 축 방향
  • place-content : <align-content> / <justify-content>

• grid-auto-columns, grid-auto-rows : 열 크기가 지정되지 않은 라인의 경우, 자동으로 생성되면서 암시적으로 0으로 설정된다. 이 자동 생성 라인 크기를 조정할 때 사용한다.

 

• grid-auto-flow

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• row : 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치
• column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치
• dense : 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치

참고 링크

minmax() 함수 | CSS Grid Layout Guidebook
A Complete Guide to CSS Grid | CSS-Tricks