minmax / auto-fill / auto-fit / gap /

minmax(min, max);

min보다 크거나 같고, max보다 작거나 같다. 하나는 고정시킬것.

 

repeat(auto-fill, minmax(100px,auto));

고정크기의 개수는 미정, 너비가 허락되는 한 모두 트랙을 만든다. 상자가 여백을 다 채운다.

grid-template-columns:repeat(auto-fill, 100px);

너비가 허락되는 한 모두 트랙이 만들어진다.

grid-template-columns: max-content;

콘텐트크기에 영향

repeat(auto-fill, minmax(100px,auto));

고정크기의 개수는 미정, 너비가 허락되는 한 모두 트랙을 만든다. 상자가 여백을 다 채운다.

<div>태그 (아이템)을 활성화시켜야 적용된다. 

아이템에 따라서 적용된다. 아이템이 없으면 아예 적용 안된다. 

auto fill : 아이템과 상관없이 자동으로 트랙을 채운다(여백이 없어진다,여백에 선긋기)

auto fit : 아이템에 영향받음, 아이템에 맞춰서 그리드를 그린다.

 

간단한 버전: 속성은 똑같다. 아이템이 없으면 적용이 안된다.

 

grid-template-columns:repeat(auto-fill, 100px);

여백까지 꽉채워진다.

grid-template-columns:repeat(auto-fit, 100px);

아이템의 크기만큼 갯수가 정해지며, 고정크기가 적용된다.

 

 grid-template-columns: max-content;

콘텐트크기에 영향

grid-template-columns: min-content;

스페이스바단위로 끊어짐

grid-template-columns: minmax(500px, 700px);

500보다 작아지면 그대로이다. (웹브라우저를 축소시키면 스크롤바가 생긴다)

 

 

gap: 양쪽적용가능 / gap : 10px; / gap : 20px 10px;

row-gap:

column-gap:

grid-auto-flow : 기본값은 row

---

 

---

grid-template-areas & grid-auto-columns :1fr; 

area에 채워진만큼 자동으로채워진다. 

갯수는 div에맞춰지고 컬럼격차는 css에 맞춰진다. 

네이밍은 안되었지만 아이템에 맞게 배치된다. (네이밍은 열3, 행2)

grid-auto-columns : 크기넣기 ; 

grid-auto-columns : 100px ;  모두 동일적용됨. 각각은 불가