간단히 말해서 그리드 레이아웃

그리드 란 무엇입니까?
그리드는 열과 행의 2차원 구조입니다. 특히 CSS 그리드는 행과 열로 배열된 다양한 html 블록으로 구성됩니다. 예를 들어

<div class="grid-example">
        <div class="grid-element-1">1</div>
        <div class="grid-element-2">2</div>
        <div class="grid-element-3">3</div>
        <div class="grid-element-4">4</div>
        <div class="grid-element-5">5</div>
        <div class="grid-element-6">6</div>
    </div>

여기 위의 html 코드에서 grid-example은 컨테이너 클래스의 이름이고 grid-element-(1,2,3,4,5,6)은 그리드 컨테이너의 요소입니다. 이러한 요소를 행과 열의 형태로 정렬하기 위해 페이지 레이아웃에 따라 사용할 수 있는 많은 속성이 있습니다.
예를 들어 기본 그리드 템플릿 속성을 사용하여 위의 html 코드에서 3열과 2행의 그리드를 생성할 것입니다.

       .grid-element-1{
            background-color: black;
            color: white;
        }
        .grid-element-2{
            background-color: white;
            color: black;
        }
        .grid-element-3{
            background-color: black;
            color: white;
        }
        .grid-element-4{
            background-color: white;
            color: black;
        }
        .grid-element-5{
            background-color: black;
            color: white;
        }
        .grid-element-6{
            background-color: white;
            color: black;
        }

위의 CSS는 다음 패턴을 생성합니다.



이제 이 컨테이너 디스플레이 그리드에서 어떤 일이 발생하는지 확인하고 있습니다. grid-template-columns 속성을 사용하기 전까지는 아무 일도 일어나지 않습니다.

.grid-example{
            display: grid;
            grid-template-columns: 100px 100px 100px;
        }

CSS 파일에 추가하거나 스타일 태그에 입력하면 위의 코드에서 각 블록이 100px인 2*3 그리드가 생성되는 것을 볼 수 있습니다.
grid-template-column은 grid-template-columns로 지정되는 그리드 열의 트랙 수와 길이를 지정하는 그리드의 속성입니다. 행의 트랙과 길이를 지정하는 grid-template-rows 속성도 유사합니다.

그리드와 관련된 속성

그리드 템플릿 열
grid-template-columns CSS 속성은 그리드 열의 행 이름 및 트랙 크기 조정 기능을 정의합니다.
그것은 아니오를 정의합니다. 그리드의 열 수 및 그리드의 각 열 크기. 각 개별 열은 다른 블록에 대한 html 마크업이 개발된 트랙이므로 트랙이라고 합니다. 예를 들어

grid-template-columns: 160px 160px;

위의 grid 속성 선언은 각각 160px의 두 블록을 생성합니다.grid-template-columns: 1fr 60px;위의 선언은 트랙을 생성하기 전에 사용했던 것과 동일합니다. 트랙 수는 2이지만 1 트랙의 길이는 뷰포트의 전체 너비에서 두 번째 트랙의 60px를 뺀 1fr입니다.
여기서 fr은 화면의 뷰포트에서 더 눈에 띄게 화면 너비의 일부를 처리하는 크기 단위를 지정합니다.
예를 들어 트랙을 다음과 같이 지정하면

1절 1절 1절 1절

모든 트랙이 너비의 1/4이라고 가정할 수 있는 것보다
뷰포트.

follow the link to mdn reference of the above property to learn more

그리드 템플릿 행

grid-template-rows 속성은 각 행의 높이를 정의합니다.
선언부터 행 추적까지 모든 것이 그리드 템플릿 열 속성과 유사합니다.

follow the link to mdn reference of the above property to learn more

갭
간격 속성은 둘 이상의 그리드 요소 사이의 간격을 지정하는 데 사용됩니다. 이것은 함께 결합된 다양한 그리드 간격 속성에 대한 속기 속성입니다.