이번에 나는 사이트를 하나 세우기로 결심했다.
아, 게임의 범주니까 예전에 만든 개인 블로그를 바탕으로 시원하게 가고 싶어요.
나는gatsby로netlify에 배치하기로 결정했다.Theme 자체는 스크롤된 것을 사용합니다.
gatsby이기 때문에 React로 제작되어 다양한 맞춤형 제작을 하는 단계입니다.
grid를 사용해야겠어요.
bootstrap 등 CSS 프레임워크에 반드시 포함되는 grid이기 때문에.
저는 이 Theme에서 사용하는 CSS 프레임워크의grid를 사용하고 싶어요.
"어? 아무것도 필요 없어..."
"이 시대에 그런 일이 있었나요?"생각하면서 조사하면'grid-template-column'의 기술...
조사 과정에서 CSS만이 grid를 표현할 수 있다는 것을 발견했다.
"아, CSS를 쓰시겠어요? 귀찮네요"하면서 조사하면 의외로 편해요. 그래서 이번에 정리해 볼게요.

이점

CSS 프레임워크가 전혀 없는 Theme에 대해bootstrap에 적응하는 것은 매우 어렵다.절대적인 형식과 외관을 어느 정도 바꿀 수 있다면 들어갈 수 있지만 CSS로 쓰면 필요 없고 다른 영향은 최소화된다.

솔직히 CSS 프레임워크는 류지옥이지만 CSS만 사용하면 류가 시원해진다.

결점

브라우저 의존도가 존재하는 것 같아서 방법을 강구해야 한다.

CSS에 대한 설명이 많아지는 것은 매우 번거롭다.

메리드메가 있지만 이번에는 써보는 선택이니까 해봐.

개념

우선 인상이 중요하고 인상을 전달하면.이것은 여러 개의 용기 (상자) 를 종횡으로 분할하고 항목이 이 상자의 위치를 지정하는 이미지입니다.
CSS 프레임워크에서row를 정의하고 항목을 분할하면 1차원 이미지이지만 CSS에서는 종횡으로 2차원 이미지입니다.
이번 목적으로는 사이드바를 추가하고 싶어서
그런 인상이에요.

먼저 컨테이너 정의

<div id="container">
    <div>sidebar</div>
    <div>contents</div>
</div>

그것은 간단한 HTML이다

#container {
    display: grid;
    grid-template-columns: 150px 1fr;
}

용기에 대해display:grid;에서 설명한 대로 해당 매개변수의 값을 수정합니다.
상기 상황에서 2열 중 1열은 150px이고 2열은 나머지 너비이다.
줄과 열의 정의는 이번에는 열만 사용하면 되기 때문에grid-template-rows를 사용하지 않지만 각자의 뜻은 다음과 같다.

grid-template-rows: 반각 공간으로 행 궤적 높이를 구분

grid-template-columns: 반각 공간으로 열 궤적을 구분하는 너비 지정

rf는 익숙하지 않은 단위지만 나머지 너비라는 뜻인 것 같다.나는 기본적으로 1rf를 사용하고 싶다. 만약 2rf라면 나머지 너비의 두 배이다.

이번에 내가 하고 싶은 일은 이렇게 이루어졌지만 더 많은 일을 할 수 있을 것 같다.
예:

분할된 용기의 임의의 위치에서 프로젝트를 제작한다.

분할된 용기의 일부분.

영역을 명명하고 관리합니다.

repeat에서 완결로 정의됩니다.

이후 좋은 보도가 있었기 때문에 여기 참조하면 잘 알 수 있다.