grid
grid-container(부모 요소)는 모두 grid child(자식 요소)를 갖고 있으며, 자식들을 늘려서 본인을 채우게 한다.(= cell을 채운다.)
justify-items와 align-items
- stretch 속성값은 grid-container가 grid child를 늘려서 grid를 채우도록 한다. (이때, stretch 속성값을 사용하는 속성은 justify-items/align-items이며, 각각 수평/수직으로 작용한다.)
- width와 height가 지정되지 않은 grid 자식 요소 안에 content가 없다면, justify-items와 align-items는 작동하지 않는다. 그러나 content가 없어도 width와 height가 지정되어 있다면, justify-items와 align-items는 작동한다.
- width와 height를 지정한 상태에서 justify-items와 align-items의 속성값이 제대로 작동되지 않는데(-> content만 있을 때는, 속성값에 따라 content를 감싼 box가 늘어나거나 줄어들며 위치가 바뀐다.), 이는 기본 크기를 지정했기 때문이며 자식 요소의 위치만 바뀐다.
ex) justify-items: start; 일때, 자식 요소의 위치는 box가 위치한 grid cell의 처음 부분이고, justify-items: end; 일때, 자식 요소의 위치는 box가 위치한 grid cell 끝 부분 이다.
items와 content
items는 cell 중의 하나, 즉, 각각의 cell을 의미하고,
content는 전체 grid를 의미한다.
- ex)
justify(align)-items는 각각의 cell을 움직이는 것이고,
justify(align)-content는 grid 전체를 움직이는 것이다.
shortcut: justify-items + align-items
place-items: y x;
(이때, y는 수직, x는 수평이다.)
shortcut: justify-content + align-content
place-content: y x;
(이때, y는 수직, x는 수평이다.)
-
justify(align)-items와 justify(align)-content는 부모 요소에 작성하여 모든 자식 요소가 움직이게 하는 것이다.
-
justify(align)-self는 부모 요소가 아닌 자식 요소에 작성하여 자식 요소가 개별적으로 움직이게 하는 것이다.
shortcut: justify-self + align-self
place-self: y x;
(이때, y는 수직, x는 수평이다.)
auto
- 지정해준 gird-template-rows(colums)보다 가져온 data가 더 많을 때,
gird-auto-rows(colums)를 사용한다.
- gird-auto-rows(colums)를 사용하면, 내가 지정한 gird rows(colums)보다 더 많은 content가 있으면, 따로 rows(columns)를 지정해주지 않아도 content만큼 자동으로 rows(columns)를 생성한다.
gird-auto-rows(colums): (size 지정);
- ex)
gird-template-rows(colums): repeat(4, 100px);
gird-auto-rows(colums): 200px;
이라고 작성했을 때,
4개의 rows(columns)가 100px의 크기를 가지고, rows(columns)의 수가 4개를 넘어가면, 그 다음 rows(columns)부터는 200px의 크기를 가진다.
- gird-template-rows(colums)을 작성하지 않고,
gird-auto-rows(colums)만 작성한다면 모든 cell은 자동화 된다.
- ex)
gird-template-rows: repeat(4, 100px);
gird-template-colums: repeat(4, 100px);
위처럼 작성되어 있을 때,
지정된 row의 수보다 많은 content가 있을 때마다, row를 생성하는 게 아니라 더 많은 column을 만들고 싶다면, grid-auto-flow: column;을 사용한다.
- 그리고 grid-auto-columns을 사용해 지정된 수보다 많은 content가 있을때마다, 늘어나는 column의 크기를 정해준다.
- 즉, grid-auto-flow와 grid-auto-columns은 함께 사용한다.
minmax
element가 얼마나 작게 혹은 크게 될 지 지정한다.
- element가 엄청 크게 되길 원하는 데, 동시에 엄청 작게 되진 않길 원할 때 사용.
- 화면 크기에 따라 element가 줄어들거나 늘어나는 데, 이때의 element의 최소 크기와 최대 크기를 지정하는 것이다.
grid-template-columns: repeat(10, minmax(min, max));
min-content / max-content
- min-content와 max-content는 크기를 의미한다.
(마치 fr처럼, min-content와 max-content 사이즈이다.)
- min-content : box를, content가 (글씨가 깨지거나 튀어나오는 일 없이)작아질 수 있는 만큼 작아지게 만드는 것이다.
- max-content : box를, content가 필요한 만큼 크게 만드는 것이다.
grid-template-columns: max-content min-content;
ex)
grid-template-columns: max-content 100px;
로 지정하면, column의 크기가 content가 필요한 크기만큼 커진다.
- 즉, min-content와 max-content는 box가 얼마나 큰지에 대해 디자인 하는 게 아니라, box 안의 content에 대해서 디자인하는 것이다.(=content가 어떻게 보여야하는 지에 대해 디자인한다.)
반응형 디자인 만들기: auto-fill / auto-fit
auto-fill / auto-fit은 repeat() 함수에만 사용한다.
1. auto-fill : 지정된 사이즈 안에서 가능한 많이 column을 만든다.
- column이 비어있더라도, column이 있는 만큼 가능한 많이 row를 채우는 것.
ex) row에 5개의 column이 존재할때, 화면의 크기가 커짐에 따라 생기는 row의 빈 공간에 더많은 column이 들어올 수 있도록 비워둔 채로 자리를 만들어 두는 것.- 정확한 사이즈를 위한 것.
- 얼마나 많은 element를 가질 지 모르기 때문에 특정한 수를 지정하는 게 아니라 auto-fill을 적어준다.
- auto-fit : 현재의 element를 늘려서 row에 딱 맞게 해주는 것이다.
- 유동적인 사이즈를 위한 것.
grid-template-columns: repeat(auto-fit(fill), (크기지정));
완벽한 반응형 디자인을 위한 결합
repeat() 함수와 minmax, min-content와 max-content를 결합.
ex) content의 크기가 서로 다른 5개의 box를 가지고 있을 때,
gird-template-columns: repeat(5, minmax(max-content, 1fr));
이때, minmax의 최소값은 max-content, 최대값은 1fr이다.
또 다른 결합
auto-fill(fit)과 min(max)-content를 결합할 수도 있다.
- gird-template-columns: repeat(auto-fill(fit), minmax(20px, max-content));
