flex Grid
flex는 한방향 레이아웃 시스템이라면, grid는 두방향(가로/세로) 레이아웃 시스템이다.
.container {
display: grid;
}flex랑 똑같이 부모요소에 grid를 설정한다.
grid도 부모에 주는 속성과 자식에게 주는 속성이 있다.
grid-template-rows/ grid-template-columns
여러단위를 섞어서 사용 할 수 있다.
.container { grid-template-columns: 200px 200px 500px; grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: 200px 1fr; ./grid-template-columns: 열의 배치 grid-template-rows: 200px 200px 500px; grid-template-rows: 1fr 1fr 1fr; grid-template-rows: repeat(3, 1fr); grid-template-rows: 200px 1fr; ./grid-template-rows: 행의 배치
fr : fraction(분수, 적은, 일부) - 숫자 비율대로 크기를 나눈다.
예를들어, 1fr 1fr 1fr 이면 1:1:1비율로 만든다는 의미
100px 2fr 1fr 이라고 하면 첫번째아이템은 100px로 고정하고, 2:1비율로 나눈다는 의미.
repeat : 반복한다는 의미
repeat(반복횟수, 반복값)
예를 들면, repaet(5, 1fr)은 1fr 1fr 1fr 1fr 1fr 이라는 의미.
repeat(3, 1fr 4fr 30px); 이런식의 패턴도 가능!
minmax
최솟값과 최댓값을 지정할수있는 함수. minmax(100px, auto); 의 의미는 최소한 100px, chleosms 자동으로 늘어나게 라는 의미이다. 내용의 양이 적어도 최소한 100px은 확보하고 내용이 100px이 넘어도 알아서 늘어나도록 할수있다.
auto-fill과 auto-fit
colimn의 개수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채운다.
auto-fill 은 마지막에 하나가비어져 있으면 채우지않고 비워져있고,
auto-fit은 남은 공간을 채워준다.
간격 gap
row-gap: 10px; 는 row의 간격을 10px로 column-gap: 20px; 는 column의 간격을 20px로
gap: 10px 20px; 은 row-gap:10px, column-gap:20px 이다.
align-items
아이템을 세로방향으로 정렬하는법 (부모에 적용)
justify-items
아이템을 가로방향으로 정렬하는법 (부모에 적용)
place-items
align-items + justfy-items 같이 쓸수있음.
그리드 헷갈리네 유투브봐야지.,
