Grid 그리드

<Grid System>

container, column, gutter

container: 그리드 시스템이 적용되는 전체범위

cell: 한 칸

gutter: 간격조정을 위한 여백  column-gap, row-gap, or gap properties.

track: 행한줄, 열 한줄

grid area: cell합쳐진 영역

 

fr 단위는 그리드 컨테이너에 남아 있는 사용 가능한 공간의 일정 비율

 

grid-line(1부터 시작)

.container {

border: 5px solid pink;

display: grid;

 

/grid-template-columns: 40% 60%;/ 열의 너비

grid-template-columns: 4fr 6fr;  / repeat(4, 1fr); = 1fr 1fr 1fr 1fr;

grid-auto-rows: 300px; minmax(200px, auto); 행의 높이

grid-grap: 1rem; item간의 공간

grid-template-columns: 150px 1fr;

}

.item {

justify-self: start;

align-self: center;

grid-column: 1/4; 1부터 4까지 공간차지

grid-row: 2/4;

}

1. 명시적 속성: grid-template-rows, grid-template-columns, and grid-template-areas
2. 암시적 속성: grid-auto-rows, grid-auto-columns, and grid-auto-flow

container, item

 

라인을 이용한 아이템 배치 .box1=item

그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고싶다면, grid-column-start 와 grid-column-end를 음수로 설정하시면 됩니다. 예를들어, -1로 오른쪽 첫뻔재 세로선을 지정하실 수 있습니다.

그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열(column)의 넓이를 지정할 수 있습니다. span은 양수만 설정 가능합니다. 예를 들어, grid-column-end: span 2;

 

매번 grid-column-start와 grid-column-end를 입력하는 것은 불편합니다. 다행스럽게, grid-column는 한번에 입력가능한 단축해서 설정으로, /(슬래쉬)로 구분됩니다.

예를 들면, grid-column: 2 / 4;는 그리드 항목을 두번째 수직선에서 네번째 수직선까지로 설정합니다.

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

 

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-row-start: 3;
}

grid-column와 grid-row 모두를 입력하는게 너무 많은경우, 다른 속성을 이용하여 줄일 수 있습니다. grid-area은 /(슬래쉬)로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능합니다.

한가지로 예로 다음과 같습니다. grid-area: 1 / 1 / 3 / 6;

 

그리드 요소들이 grid-area, grid-column, grid-row, 기타 등을 사용하지 않고, 표시될 경우 소스코드에 기입된 순서대로 표기됩니다. table 레이아웃에 비해 grid 시스템의 장점인 order 속성을 이용하면 이를 재정의가 가능합니다.

기본적으로, 그리드의 모든 요소들은 order의 값이 0이지만, z-index와 같이 양수와 음수의 값 모두 설정이 가능합니다.

 

grid-template은 grid-template-rows와 grid-template-columns를 조합한 단축 속성입니다.

예를 들어, grid-template: 50% 50% / 200px;은 각각 50% 인 두개의 행(row)과 200px 너비의 한개의 열(column)의 그리드를 생성합니다.

 

grid-template-areas

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout

그리드 게임 https://cssgridgarden.com/#ko