18일. Grid - intro

autofill 보다는 auotofit을 더 많이 쓴다?

---

 

마지막에 img 크기를 주지 않으면, 이렇게 맨 아래 사진만 살고 다 형들을 겹쳐서 위로 올라감

-> img 크기 설정 

 

그리고 margin, padding들 안주면 -> 띄어져서 그림이 있음 

 

-> 반응형처럼 이 동그라미들을 빈 공간에 크게 해줄거다~~

 

// 이건 grid가 아니라 고정 크기를 사용한 것

---

그리드 만드는 법

1) 개수 고정 auto-fit ?? 

2) 크기를 고정 auto-fill 

 

grid 쓸거니까 안녕 ~ 

 

*차이 알기*  (column 기준으로 함)

reapeat (10, 1fr) 

여백을 다 쓰는 

근데 flex-grow와의 차이점은 너비가 같다는거 

 

repeat (10, 100px)

repeat (auto-fill, 100px)

-> 오른쪽 끝에 보면 빈 공간이 있지. auto-fill은 이럼

 

repeat (auto-fit, 100px)

-> 오른쪽 끝에 보면 빈 공간이 없음. auto-fit은 이럼! 

 

 

 

-> 이거 잘못 설명한거 오류 고치기

 

 

 

 

cf) span만 있을 때랑, 1 / 3 이렇게 지정해줄 때랑 다른거 설명 추가

 

1/2 -> 첫째칸 ~ 둘째칸까지

1 / span 2 -> 첫째칸부터 (앞에서부터 2칸 더 간) 셋째칸 까지 

   = 1/3

 

span 2만 있으면 -> 그냥 앞에서부터 쭈욱 채운다. (위에 얘들은 저 칸을 꼭! 맞춰서 수직으로 써지는데, span2는 그냥 2칸씩 써서 수직으로만 써지지 않고 막 위로 올라가서 채운다는 것) 

그냥 2칸 차지하고, 3칸 차지하는 걸 볼 수 있지~~

 

 

내가 너비 높이를 지정하지 않으면 위와 같이 저절로 됨 

-> grid-column, grid-row 설정

 

여백 최소화하기 위해

-> outfit으로

-> 꽉 채우기 위해 1fr으로 주고 / outfit 으로

-> 컨텐츠가 없는 모눈종이는 없어지게 됨

 

gap 줄 수도 (그럼 이미지간 간격 생김)

 

-> 100px을 이렇게 일부러 해줄 수 있는 것

---

고정 크기 분할 되게 많이 쓰는데 너무 길다 repeat (auto....)

 

---

 

 

 

왜... 설정해준거랑 다르지....

-> 아래 이미지 크기를 px가 아니라 %로 하면 된당 (이 이유는 저기 나눠진 칸의 px이 있기 때문임)

---

Q.

- 정사각형일 필요는 없음

row, column 반대로 생각했었음 ㅠ

-> 근데 이것도 왜 안나오지 ㅠㅠ 

 

내가 해주고 싶은 방향으로 굳이! 하자면 이렇게 하면 결과 나옴

-> 그런데 repeat(7, 1fr)로 해주는게 좋겠지~~