grid

그리드를 적용하면 사용이 가능해지는 속성들이 몇개 있다.

 

우선 가로 축에 해당되는 영역을 row

세로 축에 해당되는 영역은 culumn

display: grid;

1. 우선 스타일 적용하고자하는 큰 박스에 그리드지정

2. template-columns를 적용하면 

display: grid;
grid-template-columns: 40% 40% 20%;

3개의 세로축을 만들고 첫번째 세로줄 40% 두번째너비도 40% 마지막은 20%으로 주겠당
뜻임

 

그리드는 안되는 사이트도 있기때문에

can i use 사이트에서 확인해봐야한다.

예를들어 엣지에서는 부분적으로 사용가능한 녹색으로 표시되어있는데 

support with prefix: -ms-를 사용해야한다고 써있는데

적용방법은

display: -ms-grid;

그리고 그리드 템플렛은 항목자체가 없기때문에

 -ms-grid-template-columns: 50% 50%;

이렇게 적용해주면된다.

 

그리고 fr이라는 단위를 사용할 수 있게되는데 1fr을 사용하게되면 각각 동일한간격이 적용된다.

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

2fr을 넣으면?

 

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

1:2:1 비율로 만들어지는걸 볼 수 있다.

 

그리고 갭은

grid-gap: 24px;

박스사이사이 24px씩 공간(갭)이 생긴다. 근데이건 컬럼+로우 24픽셀 동일인데

컬럼만 지정하고 싶은 경우가 있다면?

grid-column-gap: 24px;
grid-row-gap: 30px;

 

만약 그리드안에 글자들이 박스를 넘어가는 경우가 생긴다면?

grid-auto-rows: minmax(100, auto);

민맥스 값인데 이름그대로 첫번째값은 min 두번째값은 max

첫번째는 적어도 100픽셀만큼 하고 혹시 넘어가면 오토로해랑~! 이라는 뜻임