Grid

📌 grid-column-start

: 그리드 세로선에서 시작되는 영역을 가리킨다.

• grid-column-start: 3
  그리드 세번째 세로선에서 시작되는 영역(그리드의 왼쪽에서 세번째 열(column) 항목)을 뜻한다.

• grid-column-start: -3
  그리드의 오른쪽에서 세번째 세로선에서 시작되는 영역을 가리킨다.

📌 grid-column-end

grid-column-start이 단독으로 사용될때는, 한개의 그리드 열(column)을 나타낸다.
하지만, grid-column-end 속성을 같이 사용하면 여러 열(column)에 걸쳐 확장이 가능하다.

예시

왼쪽의 1번째 세로선에서 4번째 세로선까지를 가리키려면 아래처럼 해주어야 한다.

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

#water {
  grid-column-start: 1;
  grid-column-end : 4;
}

📌 span

그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열(column)의 넓이를 지정할 수 있다.

• span은 양수만 설정 가능하다.
• grid-column-start: 1, grid-column-end: span 2 이면 1번째 세로선에서 부터 오른쪽 2개를 가리킨다.
• grid-column-start를 이용하여 마지막 위치에서 상대적으로 항목의 넓이를 설정할 수 있다.
• grid-column-start : span 3, grid-column-end: 6 이면 6번째 세로선에서 부터 왼쪽 3개를 카리킨다.

📌 grid-column

매번 grid-column-start와 grid-column-end를 입력하는 대신 grid-column을 이용하면 단축해서 쓸 수 있다. /로 구분해서 쓴다.

• grid-column: 2 / 4 는 그리드 항목을 두번째 수직선에서 네번째 수직선까지로 설정한다.

📌 grid-row-start

: 그리드 가로선(행)을 기준으로 배치할 수 있다.

📌 grid-row

: grid-column과 방향만 다르고 동일하다.

예시

6번째 열에서 왼쪽으로 4개, 6번째 행에서 위로 5개

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

#water {
  grid-column : span 4 / 6;
  grid-row : span 5 / 6;
}

📌 grid-area

grid-column와 grid-row 모두를 입력하는게 너무 많은경우, grid-area를 이용하여 줄일 수 있다.
grid-area은 /로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능하다.

예시

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

📌 order

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

📌 repeat

동일한 너비의 열(column)들을 하나하나 지정하는 대신 repeat을 사용해 단축할 수 있다.

• grid-template-columns: 20% 20% 20% 20% 20% 대신 grid-template-columns: repeat(5, 20%) 와 같이 설정해도 동일하다.

📌 단위

px, em, % 등의 서로 다른 단위를 함께 사용할 수도 있다.

#garden {
  display: grid;
grid-template-columns : 100px 3em 40%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

📌 fr

Grid에는 새로운 단위인 fractional fr이 있다.

각 fr 단위들은 사용가능한 공간을 하나로 공유하여 할당한다.
예시로, 두개의 element들을 1fr과 3fr로 설정시, 공간이 4개의 동일한 크기로 공유된다. 첫번째 element는 사용가능한 공간의 1/4 크기, 두번째 element는 3/4 크기를 차지한다.

예시

왼쪽에 75px을 남기고, 남은 공간을 3 : 2로 나눈다.

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

📌 grid-template-rows

grid-template-rows은 grid-template-columns와 거의 동일하게 작동한다.

📌 grid-template

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

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

예시

아래 50px남기고 열은 20% 80%로 나누기

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

연습 사이트 : https://cssgridgarden.com/#ko