Flex 와 비슷하지만 뭔가 정해진 표(규격) 안에 컨텐츠들을 정리할 수 있다는 느낌이 드는 것이다.
Flex 는 한 방향 레이아웃 시스템이고
Grid 는 두 방향(가로, 세로) 레이아웃 시스템
Grid 의 용어 정리
display: grid;
Grid 레이아웃을 적용하는 시작은 그리드를 쓸 컨테이너에
display: grid 를 적는 것 부터 시작
그리드의 형태
repeat 함수
repeat은 반복되는 값을 자동으로 처리할 수 있는 함수인데
repeat(반복횟수, 반복값) 으로 적을 수 있다.
grid-template-columns: repeat(3, 1fr)⇒ 1fr 1fr 1fr 과 같음
minmax 함수
최솟값과 최댓값을 지정할 수 있는 함수로
minmax(최소값, 최대값) 으로 적을 수 있다.
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(3, minmax(100px, auto));⇒ columns의 경우 최소 width값이 100px 느낌이고, 최대값은 자동으로 (auto) 늘어난다.
⇒ rows 의 경우 최소 height값이 100px 이고, 최대값은 자동으로(auto) 늘어난다.
auto-fill 과 auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.
grid-template-columns:repeat(auto-fill, minmax(20%, auto));auto-fill 의 크기를 20%로 설정했으니 100/20 은 5이므로
1개의 row에 5개의 셀이 들어간다.
하지만 셀의 개수가 5보다 작다면
auto-fill 의 경우 20%의 값을 가지면서 한 셀이 남아보이고
auto-fit 의 경우 남는 공간을 채운다.(마치 width 값이 auto가 된 느낌)
grid-template-columns
열(column)의 배치
.container {
grid-template-columns: 200px 200px 500px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: refeat(3, 1fr);
grid-template-columns: 200px 1fr;
grid-template-columns: 100px 200px auto;
}grid-template-columns: 200px 200px 500px
⇒ column 을 200px, 200px, 500px로 만들겠다.grid-template-columns: 1fr 1fr 1fr
⇒ fr은 fraction 의 약자로, 숫자 비율대로 트랙의 크기를 나눈다는 뜻이다.
⇒ 1 : 1 : 1 비율인 3개의 column을 만들겠다는 의미 | | | 요고grid-template-columns: 200px 1fr;
⇒ 200px 짜리랑 나머지 사이즈의 2개의 column을 만들겠다.
⇒ 만약 200px 1fr 2fr 로 한다면, 200px은 고정이고 나머지는 1:2 비율로 만들겠다.grid-template-columns: 100px 200px auto;
⇒ 총 3개의 column을 만드는데 100px, 200px은 고정값으로 나머지는 auto(나머지 다 내꺼)로 만들겠다.
grid-template-rows
행(row)의 배치
.container {
grid-template-rows: 200px 200px 500px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: refeat(3, 1fr);
grid-template-rows: 200px 1fr;
grid-template-rows: 100px 200px auto;
}간격 만들기 gap
그리드 셀 사이의 간격을 설정
row-gap: row 간격을 조정 (ㅡ 라인)column-gap: column 간격을 조정 (ㅣ 라인)gap:gap: 10px 20px은 row-gap 10px, column-gap 20px 이라는 뜻
gap: 20px은 row-gap, column-gap 20px 이라는 뜻
그리드 형태를 자동으로 정의 : grid-auto-columns(rows)
grid-template-columns(rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성
예를 들어
grid-template-rows: repeat(3, minmax(100px, auto)) 는
각 셀마다 최소 100px의 높이를 가지고, 컨텐츠의 높이가 100px이 넘으면 자동으로 늘어났다(auto).
그런데 우리가 repeat을 3을 줬으면 3번 반복한다는건데 row의 갯수를 미리 알 수 없다면?
그 때 사용할 수 있는게 grid-auto-rows: minmax(100px, auto) 이다.
grid-auto-rows 는 횟수 지정해서 반복할 필요 없이 알아서 처리한다.
셀 영역 지정하기
각 셀의 영역 지정하기
grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row
이 속성들은 그리드 아이템 에 적용하는 속성으로 각 셀의 영역을 지정할 수 있다.
제일 처음에 Grid 용어 정리 에서 그리드 라인 의 번호를 가르키는 그리드 번호 가 있었는데
이 번호를 이용해서 column 과 row의 범위를 정한다.
grid-column-start grid-row-start 가 시작번호
grid-column-end grid-row-end 가 끝 번호
grid-column grid-row 은 start 와 end 속성을 한번에 쓸 수 있는 축약형이다.
- 연두색 영역 만들기
.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
**** 아래처럼 줄일 수 있다.
grid-column: 1 / 3;
grid-row: 1 / 2;
}
- 빨간색 영역 만들기
.item:nth-child(5) {
grid-row: 2/4;
grid-column: 3/4;
}
몇 개의 셀을 차지하게 할지도 정해보자
.item:nth-child(1) {
/* 1번 라인에서 2칸*/
grid-column: 1 / span 2;
/* 1번 라인에서 3칸*/
grid-row: 1 / span 3;
}
grid-column 으로 통제받지 않는 column 만들기
end를 생략하면 그냥 1칸임!
.container {
grid-template-columns: 50px;
grid-auto-columns: 1fr 2fr 3fr;
}
.item:nth-child(1) { grid-column: 2; }
.item:nth-child(2) { grid-column: 3; }
.item:nth-child(3) { grid-column: 4; }
.item:nth-child(4) { grid-column: 5; }
.item:nth-child(5) { grid-column: 6; }
.item:nth-child(6) { grid-column: 7; }첫번째 column(7) 만 grid-template-columns 때문에 50px을 가지고, 나머지 column들은 grid-auto-columns 때문에 1:2:3 비율이 반복된다.
영역 이름으로 그리드 정의 : grid-template-areas
각 영역(Grid Area)에 이름을 붙이고
그 이름을 이용해 배치하는 방법으로 매우 직관적인 방법이다.
.container {
grid-template-areas:
"header header header"
"a main b"
". . ."
"footer footer footer";
}⇒ 각자 차지하는 셀의 갯수만큼 해당 위치에 이름을 써주면 끝
각 셀마다 공백을 하나씩 넣어서 구분해주면 된다.
빈칸은 .(마침표) 또는 none 을 써도 되고 마침표의 갯수는 여러개를 써도 상관 없다.
각 영역의 이름 매칭은
해당 아이템 요소에 grid-area 속성으로 이름을 지정해주면 된다.
.header {grid-area: header};
.sidebar-a {grid-area: a};
.main-content {grid-area: main};
.sidebar-b {grid-area: b};
.footer {grid-area: footer};
자동 배치 : grid-auto-flow
아이템이 자동 배치되는 흐름을 결정하는 속성이다.
dense 를 사전에 검색해보니까 밀집한, 농밀한이라는 뜻을 가지고 있었다.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25%, auto));
grid-template-rows: repeat(5, minmax(50px, auto));
/* grid-auto-flow: row; */
/* grid-auto-flow: column; */
grid-auto-flow: dense;
/* grid-auto-flow: row dense; */
/* grid-auto-flow: column dense; */
}
item:nth-child(2) {grid-column: auto / span 3; }
item:nth-child(5) {grid-column: auto / span 3; }
item:nth-child(7) {grid-column: auto / span 2; }-
grid-auto-flow: row;
-
grid-auto-flow: column
⇒grid-auto-flow: column dense랑도 같음
-
grid-auto-flow: dense
⇒grid-auto-flow: row dense랑도 같음
정렬
items 정렬
-
세로(column축) 방향 정렬 : align-items
컨테이너에 적용하며,
stretch,start,center,end가 있다.
-
가로(row축) 방향 정렬 : justify-items
컨테이너에 적용하며,
stretch,start,center,end가 있다.
-
place-items
align-items 와 justify-items를 같이 쓸 수 있는 단축 속성으로
위 두 순서대로 작성하며, 하나의 값만 쓰면 두 속성 모두에 적용된다.
예시 :place-items: center start;
content 정렬
-
아이템 그룹 세로 정렬 : align-content
Grid 아이템들의 높이를 모두 합한 값이
Grid 컨테이너의 높이보다 작을 때 Grid 아이템들을 통째로 정렬한다.
⇒ items 는 각 아이템들을 정렬한 느낌이였다면 content는 items를 그룹으로 묶어서 한번에 정렬하는 느낌?
stretch,start,center,end,space-between,space-around,space-evenly -
아이템 그룹 가로 정렬 : justify-content
Grid 아이템들의 너비를 모두 합한 값이
Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬
stretch,start,center,end,space-between,space-around,space-evenly -
place-content
align-content 와 justify-content 를 같이 쓸 수 있는 단축 속성
align-content, justify-content 의 순서로 작성하고 하나의 값만 쓰면 두 속성에 모두 적용된다.
예)place-content: space-between center;
개별 아이템 정렬
개별 아이템 세로 정렬 : align-self
해당 아이템을 세로(column축) 방향으로 정렬하는데
기본 정렬과 다르게 아이템에 적용한다.
stretch,start,center,end가 있다.
.item { align-self : center };개별 아이템 가로 정렬 : justify-self
해당 아이템을 가로(row축) 방향으로 정렬하는데
기본 정렬과 다르게 아이템에 적용한다.
stretch,start,center,end가 있다.
.item { justify-self : center };place-self
align-self 와 justify-self 를 같이 쓸 수 있는 단축 속성
align-self, justify-self 의 순서로 작성하고 하나의 값만 쓰면 두 속성 모두에 적용된다.
배치 순서 : order
각 아이템들의 시각적 나열 순서를 결정하는 속성으로 숫자값이 들어가며, 작은 숫자일수록 먼저 배치된다.
이는 시각적 순서일 뿐 HTML 자체의 구조를 바꾸는 것은 아니므로
접근성 측면에서 사용에 주의해야 한다.
(스크린 리더로 읽을 때 order를 이용해 순서를 바꾼 것은 의미가 없음)
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
