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;
}
- 명시적 속성: grid-template-rows, grid-template-columns, and grid-template-areas
- 암시적 속성: 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