지난번 포스팅에 이어 썸네일은 Grid와 직접적인 관련이 있는 Wafers로..ㅎ 웨하스는 일본식 발음이라고 하니 이제부턴 Wafer라는 말을 씁시다! 여튼 시작!
fr
부분을 뜻하는 Fraction의 줄임말로, 정확한 픽셀값 대신 숫자+fr을 써주면 알아서 비율에 맞게 화면을 차지하게 된다! 올ㅋ
html에서 상자를 네 개 만들고.. 아래와 같은 css 속성을 줘볼게요 (1탄과 동일하게 scss파일입니다.)
$red: #ff5e57;
$yellow: #ffdd59;
$blue: #3c40c6;
$green: #05c46b;
.container {
display: grid;
grid-gap: 5px;
grid-auto-rows: 200px;
grid-template-columns: 1fr 2fr 3fr 4fr;
div:nth-child(even) {
background: $yellow;
}
div:nth-child(odd) {
background: $blue;
}
}grid-template-columns: 1fr 2fr 3fr 4fr; 지금 grid-template-columns에 왼쪽과 같은 속성값을 줬는데요 어떤 결과가 나올까요! 두둥~
제일 첫번째 네모는 공간을 1fr만큼 차지해서 제일 작고, 제일 마지막 네모는 공간을 4fr만큼 차지하기 때문에 첫번째 네모의 4배가 됩니다.
화면을 작게 줄여볼까요?
그래도 여전히 width의 길이는 1,2,3,4배가 차이 나네요! 이러면 우리가 width값을 따로 주지 않아도 화면에 꽉 차고, 비율대로 나오게 됩니다!
repeat()
자바스크립트 문법에서도 특정 string을 반복하게 해주는 repeat함수가 있었는데, CSS-grid의 성질 중에도 이런게 있습니다! 괄호 안의 첫번째 인자엔 만들 개수, 두번째 인자엔 크기를 넣어주면 되는데요!
grid-template-columns: repeat(1, 1fr);
이 코드대로라면 columns이 1fr크기로 1개 생기겠죠? 이렇게..
repeat으로 기둥을 만들어 준 후 옆에다 원하는 만큼 더 추가할 수도 있어요!
예를 들어… grid-template-columns: repeat(2, 1fr) 4fr; 이런 코드는
이렇게!
auto-fill과 auto-fit
위의 repeat함수에 auto-fill이라는 속성을 먼저 넣어볼게요. 이름만 들어도 뭔가 채워줄것 같지 않나요?
실제로 보이는건 위의 그림이지만, 개발자도구 커서를 이용해서 확인해보면, 숨겨진 column들을 화면에 꽉 차게 만든것을 확인할 수 있습니다!
auto-fit도 함 봅시다! auto-fi이 최대한으로 채우는거라면, auto-fit은 화면에 맞게 최대한 으로 공간을 차지하는 속성을 가지고 있어요.
예시를 보기 전에 minmax에 대해 알아봅시다
minmax()
괄호 안 첫번째 인자엔 최소값, 두번째 인자엔 최대값이 들어가는 함수에요. 최소값을 지정해줄 수 있으니까 반응형 페이지를 만들 때 좀 더 간단하게 만들 수 있겠죠?
그럼 다시 auto-fit의 예시를 봅시다.
grid-template-columns: repeat(auto-fit, minmax(200px, 4fr));
grid-template-rows: repeat(auo-fit, minmax(200px, 4fr));최소값을 200px, 최대값을 4fr로 주면 아래와 같이
이러한 화면이 나오게 되는데요! 이 화면을 모바일 사이즈로 줄여보면…
넘나 제가 원했던 화면이 나옵니다… 이번 팀프로젝트때 메인 화면중 일부를 이런식으로 만들고 싶었는데!! 이것만 있으면 flex에서 media query min값 따로 설정 안해줘도 되고 간편할듯!!!
justify-content
이거 어디서 많이 본 단어 아닌가요? 네 맞습니다~ flex box에 있던 속성인데 grid에서도 적용할 수 있어요. 가로 기준으로 정렬하는 방법입니다.
.container {
display: grid;
grid-gap: 5px;
grid-auto-rows: 200px;
grid-template-columns: repeat(4, 100px);
justify-content: center;부모 div에 위와 같은 값을 주면 결과는
이렇게 가운데로 오게 됩니다! 그 밖에도 start, end 등이 있으니 MDN 같은 공식 문서 참고해보세용
align-content
justify-content와는 반대로 세로 기준으로 정렬하는 방법이에요. 그렇기 때문에 부모div에 높이값이 꼭 필요합니다!!
align-content: center;
height: 100vh;이렇게 해보면 결과는!!
오.. 뭔가 핸드폰 배경화면 느낌쓰~ 맘에 드는 분들은 저장하셔도 됩니다 ㅋㅋㅋ
place-content
위의 justify와 align을 합친 거라고 보면 될것 같은데요! 첫번째론 align의 속성이, 두번째는 justify의 속성이 들어갑니다. 페이지의 한 가운데인데 제일 밑에 상자를 위치시키고 싶다면..!
place-content: end center;
height: 100vh;
식을 두 줄 쓸 필요도 없이 place-content 한 방이면 해결 완료~ 여기서 더 나아가서… 자식 div에 들어가는 값도 정렬을 해보려고 하는데요! 위에서 했던 과정과 동일하게…
justify-items
justify-items: center;
align-items
align-items: center;
각각 정렬하면 이렇게 되는데… 한 방에 하는 방법이 또 있겠죠? 네 맞습니다 ㅋㅋ
place-items
place-items: center;
자식div에게 값을 따로 주지 않아도 부모div에서 알아서 다 설정하면 된다는게 넘 편한거 같고요?! 포스팅이 또 길어지니 다음편에서 계속됩니다