grid 문법

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

#water {
grid-row : 3/ span 3
}

 

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

#water {
	grid-column : 2 / -1;
	grid-row : 1 / -1;
}

 

 grid-area은 /(슬래쉬)로 구분지어  grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능합니다.

 

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

#water {
grid-area : 1/2/4/-1;
}

 

order 

숫자가 양수면 뒤로, 음수면 앞으로

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

.water {
  order: 0;
}

#poison {
  order : 1;
}

 

repeat으로 template 반복 표현(template는 %말고 px과 em으로 표현 가능)

#garden{
display : grid
grid-template-columns : repeat(5, 12.5%);
grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 1;
  grid-row: 1;
}

 

fr로 분할로 나눠서 표현 가능

1fr 3fr이면 4/1과 4/3의 합

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

px과 같이 쓰면 fr은 px의 남은 영역을 나눠가짐

#garden {
  display: grid;
  grid-template-columns : 75px 3fr 2fr;
  grid-template-rows: 100%;
}

 

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

 

#garden {
  display: grid;
grid-template: 60% / 200px
}

#water {
  grid-column: 1;
  grid-row: 1;
}

#garden {
  display: grid;
  grid-template : 1fr 50px / 20% 1fr
}