10_CSS_Grid

오늘은 grid에 대해 공부했다. 평소 내용보다 조금 양이 많다!!

 

 

CSS Grid는 2차원(행과열)의 레이아우스 시스템을 제공한다
CSS Grid는 예전부터 Hack이라 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS모듈이다.

>>파이어폭스 브라우저를 사용해 테스트하면 공부하기 더 편하다.
>>확인해보니 크롬도 지원해준다!

CSS Flex와 같이 컨테이너와 아이템이라는 두 가지 개념으로 구분되어 있다.

display 그리드 컨테이너(Container)를 정의
grid-template-rows 명시적 행(Track)의 크기를 정의
grid-template-columns 명시적 열(Track)의 크기를 정의
grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
grid-template grid-template-xxx의 단축 속성
row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정의
gap(grid-gap) xxx-gap의 단축 속성
grid-auto-rows 암시적인 행(Track)의 크기를 정의
grid-auto-columns 암시적인 열(Track)의 크기를 정의
grid-auto-flow 자동 배치 알고리즘 방식을 정의
grid grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
place-content align-content와 justify-content의 단축 속성
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items 그리드 아이템들을 수평(행 축) 정렬
place-items align-items와 justify-items의 단축 속성


간단하게 위와같은 속성들을 가지게 되며, 하나하나씩 설명해 보겠다.

display
Grid Container를 정의합니다.
정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의된다.

grid   Block 특성의 Grid Container를 정의
inline-grid   inline 특성의 Grid Container를 정의

inline-grid

grid-template-rows
명시적 행(Track)의 크기를 정의
동시에 라인의 이름도 정의할 수 있다!

grid-template-columns
명시적 열(Track)의 크기를 정의

template예

repeat함수를 사용하여 적을수도 있다.

grid-row
grid-column

item들의 시작 및 끝지점을 지정할 수 있다.
1 / 2 <<왼쪽처럼 시작지점,끝지점을 표시
>>구간이 겹치면 겹쳐지면서 나온다!
span : 확장한다! 라고 생각하면 된다.
span이 뒤에있다면? 1 / span2 == 1 / 3
span이 앞에있다면? span2 / 4 == 2 / 4
즉 +,-관계없이 확장한다..라고 생각하면 편하다

get-row,column을 이용한 위치지정

grid-template-areas
grid area(그리드 영역 이름)을 참조해 그리드 템플릿을 생성한다
>> grid-area는 Grid-item에 적용하는 속성이다.

areas를 이용한 한번에 설정하기

row-gap
column-gap
행과행 혹은 열과 열 사이의 간격을 지정한다.

>> 더명확하게 그리드 선(Grid line)의 크기를 지정한다고 표현할 수 있다.
>>원래 grid-row-gap 이렇게 썼었지만, 일부버전의 브라우저 지원을 위해서는 grid-접두사 사용을 고려할 수도 있다.



grid-auto-rows
grid-auto-columns
암시적 행(Track)의 크기를 정의한다.
grid-template-rows나 columns는 명시적 행을 정의한다면, 위 속성은 주어진 행,열을 벗어난 곳에 아이템들이 위치될경우 그 속성들의 크기를 정의하는데 사용된다.

>> 자동으로 생성된 열과 행에서는 음수를 사용할 수 없다

get auto-column

dense를 이용하여 빈칸이 채워진 모습

grid-auto-flow
배치하지 않은 아이템(item)을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의합니다.

row   각 행 축을 따라 배치_수평방향
column 각 열 축을 따라 차례로 배치_수직방향
row dense 각 행 축을 따라 배치, 빈영역 매움
column dense 각 열 축을 따라 배치, 빈 영역 매움


grid-template-rows [ 추가 ]
명시적 행의 크기를 정의 및 라인의 이름을 정의한다.

repeat(4, 100px 200px 300px)
>> 100px 200px 300px 100px 200px 300px 100px 200px 300px 100px 200px 300px
반복은 여러개도 가능하다.

이름을 설정할 수 있다!

grid-area

grid-area : <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
순서를 유의할 것.
또한, 위에서 설명했던 것처럼 이름을 설정하는 용도로도 사용 가능하다.
grid-area : [이름]


grid-template
grid-template-rows,grid-template-columns,grid-template-areas의 단축 속성

1.
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-template: <grid-template-areas>;
2.
grid-template:
 [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
 [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
 / <grid-template-columns>;

위 두가지 방법으로 사용 가능하다.

두번째 예시를 해본 모습

grid
grid-template-xxx과 grid-auto-xxx의 단축 속성

grid: <grid-template>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

>>보통 grid의 속성들은 rows가 먼저 오고 columns가 오는걸 생각해두면 좋다.

autoflow가 들어오면 row를 암시적으로 정의하는것이 된다.

>>문법이 조금 헷갈릴 수 있어 명확하게 grid를 굳이 사용하지 않는것도 방법이다.


align-content
그리드 콘텐츠(Contents)를 수직 정렬한다.
>> 그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야지만 작동한다.

normal stretch와 같습니다.
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
space-around 각 행 위아래에 여백을 고르게 정렬
space-between 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly 모든 여백을 고르게 정렬
stretch 열 축을 채우기 위해 그리드 콘텐츠를 늘림

>>이전의 flex에서 공부했던 정렬하는 개념과 똑같다!

justify-content
그리드 콘텐츠의 수평 정렬을 정의한다.
안의 속성은 위의 align-content와 같다


align-items
그리드 아이템들의 수직 정렬을 설정한다.

normal stretch와 같습니다. normal
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
stretch 열 축을 채우기 위해 그리드 아이템을 늘림

>> 그리드 아이템들이 컨테이너의 셀들 안에서 어떻게 정렬되는지를 설정한다!

justify-items
그리드 아이템들의 수평 정렬을 설정하며, 수직정렬과 동일하다.


이하는 Grid Items에 부여하는 속성들을 써 보겠다.

align-self
그리드 아이템을 수직정렬하는 속성이다
>> align-items같은 경우는 container에 부여해주는 속성이지만, self는 items에 부여하는 속성이다.

justify-self
그리드 아이템을 수평정렬하는 속성이다. 사용방법은 위와 같다.


order
그리드 아이템이 자동배치되는 순서를 변경할 수 있다.
>> 음수값도 가능하다.

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }
.item:nth-child(5) { order: -1; }

위 예제처럼, 실제 순서와 다르게 order에 맞게 설정된다. flex의 order개념과 같으니 보면 될 것 같다.

z-index 
flex의 position이 부여되었을때 적용하였던 z-index와 똑같다.

.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
  z-index: 1;
}
.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;
}

위 코드처럼 서로 겹쳐져 있을 경우, 2번영역이 1번영역이 위에있을지 밑에있을지 결정하는 것은 html순서지만, 2번 z-index를 1로 설정함으로, 그 순서를 따르지 않게 된다. 역시 flex속성과 같다고 생각하면 된다.




Grid Functions
이제는 그리드에서 사용하는 주요 함수에 대해서 서술하겠다.

repeat
행/열의 크기정의를 반복하여 사용할 수 있게하는 함수
>> 위에서 몇번 사용하였기에 따로 서술하지는 않겠다

반복설정할때, repeat(3, [col-start] 100 px [col-end] ) 이런식으로 이름을 지정하면서 반복하는것도 가능하다.

minmax
함수는 행,열의 최소/최대 크기를 정의한다.

.container {
  grid-auto-rows: minmax(200px, auto);
  grid-auto-columns: minmax(300px, auto);
}

위 예제같은 경우, 암시적 행/열의 크기를 최소는 200 / 300으로 설정하였지만, 아이템의 크기에 따라 더 커지게도 할 수 있는 역할을 한다.

fit-content
행/열의 크기를 그리드 아이템이 포함하는 내용(content) 크기에 맞추는 역할을 한다.

fit-content

주석에 적힌대로, 100%는 내용의 %를 의미한다.

minmax(auto, max-content)와 굉장히 유사하다.
>>이때 max-content는 함수가 아닌, 특정 값이다!

fit-content(300px) 와 같이 쓸 경우, 그리드 아이템에 맞춰지긴 하지만, 300px를 넘지 못하게 설정할 수 있다.


Grid Units
그리드에서 사용하는 주요 단위들이 있다

fr(fractional unit)
사용가능한 공간에 대한 비율
위에서 많이 사용했다. 1fr 1fr 1fr의 경우, 1:1:1로 가져감을 나타낸다.

min-content
해당 아이템이 가질수 있는 사이즈중에서 최소
max-content
해당 아이템이 가질 수 있는 사이즈중에서 최대

min-content,max-content

한글이 세로일경우, 스페이스바 단위로 끊어주기위해 사용한 word-break

auto-fill,auto-fit
행,열의 개수를 그리드 컨테이너나 행/열 크기에 맞게 자동으로 조정하는 단위이다.
repeat()함수와 같이 사용하게 되며, 행/열 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다
>> 둘의 차이가 거의 없다
>> 다 동일하지만 그리드 컨테이너가 모든아이템을 수용하고 남는공간이 있을때 차이가 발생한다.
>> auto-fill같은 경우 남는 공간을 그대로 유지하지만, auto-fit은 남는 공간을 축소한다.
반응형 grid를 만드는데 아주 유용하다

넘치는 경우를

자동으로 맞춰준다.

Grid를 공부해 보았다