[CSS]그리드 아이템(grid item) 속성

 

Grid item 속성

 

---

 

Grid item에서 사용 가능한 속성 정리

 

열/행 크기 설정

grid item의 위치를 지정해줄 수 있습니다. 

span 은 grid item이 차지할 칸(cell)의 수를 의미하며, grid item위치를 지정할 수 있습니다. 

 

• grid-row-start 
• grid-row-end 
• grid-row : 행 시작위치 / 행 끝위치, 행 시작위치 / span #
• grid-column-start 
• grid-column-end 
• grid-column : 열 시작위치 / 열 끝위치, 행 시작위치 / span #
• grid-area : grid-row 와 grid-column 의 단축 속성, 또는 그리드 영역 이름 설정

 

 

그리드 선

그리드 선(grid lines)은 양수나 음수로 지정할 수 있고, 그리드 영역 이름(grid-area)으로 지정할 수도 있습니다. ①직접 grid item에 지정(예: grid-area: first-line;) 하거나, ②grid container에 괄호 [] 를 써서 지정(예: grid-template-columns: [first-line] auto;) 합니다.

출처 : https://www.w3schools.com/css/css_grid.asp

.grid-container {
  display: grid;
  grid-template-rows: [first-line] 200px [second-line] 200px [third-line] 200px [fourth-line] 200px [fifth-line];
  grid-template-columns: repeat(4, 100px);
}

 

 

아이템 개별 정렬

각 cell 안에서 grid item들의 정렬 방식을 일괄적으로 결정할 때에는 grid container에서 justify-items, align-items 속성을 통해서 지정해줄 수 있습니다. 반면 하나씩 개별적으로 결정할 때에는 grid item에서 justify-self, align-self, place-self 속성을 통해서 지정합니다.

• justify-self : cell 안에서 grid item의 수평(가로) 정렬하는 방식 결정
• align-self : cell 안에서 grid item의 수직(세로) 정렬하는 방식 결정
• place-self : align-items jutify-items (단축 속성)

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 노마드코더/바닐라JS로 그림 앱 만들기 : https://nomadcoders.co/javascript-for-beginners-2