그리드

display : grid;

 

 

grid-template-columns: 40% 60%;  (4:6) 이거보단 

grid-template-columns: 4fr 6fr;  이거를 써. 왜냐면 %는 스크롤할때 공간이생겨서

grid-template-columns: repeat(3,1fr);  1fr을 3번반복

(grid-template-columns: 1fr 1fr 1fr 이거랑 위에꺼랑 같아)

 

grid-template-columns: 200px 1fr;  200px고정 나머지는 화면 크기 조절할때마다 움직여

 

grid-auto-rows: 300px;  이거는 모든 행 높이 같게 할려고 근데 이러면 height가 300보다 큰 행이 있으면 이상해

grid-auto-rows: minmax(200px, auto);  이거는 200보다 작으면 200으로 200보다 크면 auto로. 근데 각 행마다 높이는 달라이러면

 

grid-gap:1rem  그리드 사이에 간격

 

justify-items: start | center | end  -- flex의 justify-content랑 똑같아   start는 왼쪽 end는 오른쪽에 붙어

align-items: start | center | end;        start는 위쪽 end는 아래.  각 행마다야

 

이거는 grid안에 있는 요소에  justify-self  align-slef

 

 

 

그리드가 크기가 항상 같지 않잖아 1번이 가로전체인경우나 그런경우

.item:nth-child(1){
  grid-column:1/4;  //컬럼 1부터 4까지 차지하게}

 

.item:nth-child(4){
  grid-row:2/4;  //row(행) 2부터 4까지   근데 위치가 바뀐다면 마음대로. 시작column을 지정해주면 돼  grid-column:3;  //이런식으로}

 

겹치게도 할 수 있어 이런식으로하면

 

 

flex

ms3864.tistory.com/189

플렉스 박스 레이아웃