grid-row / grid-column / auto 와 1fr차이/ @media screen

그리드: 균등분할시스템, 콘텐트 꾸밀때도 사용가능

 

grid-row / grid-column

grid-row / grid-column

 

#id>.class{ }

1fr vs 100px 차이

grid-template-colums : 1fr 1fr 1fr;

grid-template-colums : 100px 100px 100pxx;

 

auto 와 1fr차이

1fr은 콘텐트를 포함해서 여백이 있다면 그 여백을 균등분할 (컨텐트 크기에 영향x)

flex-grow : 여백이있으면 그 공백을 나눠가짐 (컨텐트 영향 ㅇ)

 

grid-template-columns:repeat(3,auto);

grid-template-columns: 1fr auto auto;

auto가 1fr에게 다 양보한다.

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

auto가 1fr에게 다 양보한다.

가운데 auto때문에 들쭉날쭉해지므로 사용할때 유의할것

grid-template-columns : repeat(12, 1fr 2fr);

1:2로 나눈 영역을 12번반복한것 총 24개칸의 생긴다.

총 갯수가 24개의 칸, 1fr + 2fr ,1fr + 2fr, 1fr + 2fr,...,1fr + 2fr반복된다.

 

@media screen and (min-width:500px){}

@media screen and(min-width:800px){}

두개 다 공존한다. 덮어쓰기된다.