/* CSS GRID */
display: grid;
/* grid-template-columns: 1fr 1fr 1fr auto; */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr auto;
height: 500px;Grid-template-columns에서 저렇게 repeat를 쓰고
column숫자랑 1fr(알아서 비율 맞춰서 사이즈 조정하는거) 하면
아주 간편하다!!!!
저기에 height써준건 container height을 지정해준거다.
그래서 1fr 하면 알아서 비율 맞춰서 height가 지정되고
auto;했으니까 얘는 최소한의로 필요한 height만 가지게 되는거.
그래서 모습이 이렇게 된다.
참고로 원래 grid-template-row는 잘안씀..
Grid-template-columns 설정해놓으면 css가 알아서
설정하기 때문.
dev툴 사용해봤더니 확실히 컨테이너 height가 500px이었고
그 안에서 저렇게 애들이 비율을 맞춰 들어가있었다ㅎㅎㅎ
다음으로 grid items들 위치를 바꾸는거에 대해 배웠다.
요건 진짜 너무 신기했다. dev툴에가서 grid누르면
막 저번에 배웠던 cell number,gutter 등등이 나온다.
이런식으로 나옴.. grid items 위치를 바꿔주는거니까
이건 grid container에 쓰는게 아니라
따로 grid items 에 적용시켜줘야한다.
예를 들어 아래처럼
.el--8 {
grid-column: 2 / 3;
/* grid-row: 1 / span 2; */
grid-row: 1 / 2;
}
.el--2 {
/* grid-column: 1 / 4; */
/* grid-column: 1 / span 4; */
grid-column: 1 / -1;
grid-row: 2 / 3;
}
저기 나와있는 cell 번호 보고 지정해주면
알아서 span하고 위치도 바뀌고 한다 !
역시 그리드로 쓰는게 제일 간편하구만 !!!
끝까지 span해줄꺼면 저렇게 1/4나 1/span 4해줘도 되지만
제일 마지막은 cell number가 -1도 되기때문에
저렇게 1/-1로 써줘도 된다는 사실...꺅 넘 재밌다.
다음은 그리드 아이템이랑 트랙을 정렬하는 방법에 대해
알아보자! 먼저 트랙이 컨테이너 사이즈보다 작을때에는
아주 간단하게
justify-content: center;
align-content: center;이걸 이용해서 센터에 옮겨줄 수 있었다!
참고로 플렉스는 align-content: flex-end; align-content: flex-start;이런식으로 써서 수직 맨위에 그리고 맨 끝에 붙여주는데
그리드는 align-content: end; align-citent: start; 그냥 이런식으로만 써준다는 차이가 있다고 한다.
그리고 items들을 cell안에서 정렬시켜 주기 위해서는
align-items: end;
justify-items: end;이렇게 items라고 써주고 정렬시켜주면 된다!
여러 아이템들 중에서 하나만 정렬해주고 싶을때는
.el--3{
align-self: center;
justify-self: center;
}이런식으로 간단하게 해줄 수 있다는^^
이제 Grid에 대해 기본적인건 배웠으니
내가 지금 하고 있는 블로그 프로젝트를 그리드로 바꿀차례~~
flex할때는 이거 옆으로 보내주기 위해서 div로 애들을 묶어준다음에
했었는데 grid에서는 그럴 필요가 없다 왜냐면
2-dimentional layout이 가능하기 때문!!!
.container {
display:grid;
grid-template-columns: 1fr 300px;
column-gap: 75px;
row-gap: 60px;
align-items: start;
}
.main-header {
/* grid-column: 1 / span 2; */
grid-column: 1 / -1;
}요렇게 그리드 설정해주면 끝 ><
아 힘들어 ㅠㅠㅋㅋㅋ
