21.08.02 grid-template-columns

실전 프로젝트진행에 있어 대략적인 기능 구현을 우선적으로 하고나서

프레임워크 따라 CSS를 잡아보는 날이였다

우선적으로 컨텐츠의 번호와 제목등을 map돌리고 담은 박스를 메인 페이지 표시하기위해
BordBox라는 이름으로 컴포넌트를 만들었다

다른 리액트팀원이 grid-template-columns 쓰는걸 보고 처음 알게 되서 오늘 TIL로 끄적여 본당ㅎㅎ🤴🏽

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

위에 코드처럼 적는다면

이렇게 나온당!

fr 단위를 포함한 가변 그리드

길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 fr 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.

트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 1fr 트랙을 생성한다.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

이제 가변 트랙을 보유했다는 것이 확인될 것이다. fr 단위는 공간을 균등하게 분배하므로 예를 들어 다음과 같이 규정을 변경할 경우 트랙에 서로 다른 값을 부여할 수 있다:

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

첫 번째 트랙은 이제 사용 가능한 공간의 2fr을 얻고 다른 두 트랙은 1fr을 얻음으로써 첫 번째 트랙을 더 크게 만듭니다. fr 단위와 고정 길이 트랙을 혼합할 수 있습니다. 이러한 경우 고정 트랙들에 필요한 공간이 제외한 이후에 해당 공간이 다른 트랙에 분배됩니다.

참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids