CSS 격자선 소개

소개하다.
이 문서에서 저는 CSS 격자에 대한 기초 지식, 그것이 무엇인지, 그리고 그것을 어떻게 사용하기 시작하는지 소개할 것입니다.이것은 나의 학습을 돕기 위해서이며, 지역 사회에 신속하고 유용한 것을 가져다 주기를 바란다.
나를 따라 이 경외심을 불러일으키는 기술을 분해해 주십시오!😄

CSS 격자란?
CSS 메쉬를 사용하면 주어진 부분을 행과 열로 그룹화할 수 있으므로 이름이 CSS 메쉬로 지정됩니다.CSS에서 항목의 위치를 지정하여 격자선의 모든 영역에 요소를 배치할 수 있으므로 레이아웃을 구성할 때 유용합니다.

CSS 격자 시작
우선, 부모 용기가 필요합니다. 특수한 속성을 적용해서 격자를 활성화할 수 있습니다.그런 다음 메쉬의 일부가 되기를 원하는 항목이 부모 컨테이너에 배치됩니다.

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

.container {
  display: grid;
 }

메쉬를 활성화하려면 표시 속성을 메쉬 값과 함께 적용합니다.이것은 브라우저에 우리가 지정한 용기가 하나의 격자였으면 한다는 것을 알려 줍니다.
이렇게 하면 CSS 메쉬와 연관된 다양한 속성을 사용하여 레이아웃을 구성할 수 있습니다.

CSS 메쉬 속성

메쉬 템플릿 열: 열 크기 및 수량 지정

메쉬 템플릿 행: 행 크기 및 수량 지정

예시 용법

.container {
    ...
    /* Defining two columns with the size of 60px */
    grid-template-columns: 60px 60px;
}

이러한 속성을 사용할 때 격자를 명시적으로 정의합니다. 이것은 격자의 행동 방식을 정확하게 정의하고 있음을 의미합니다.
열을 정의할 때 행에 규칙을 지정하지 않으면 CSS는 요소의 크기에 따라 행을 암시적으로 작성합니다.

격자 간격: 격자의 불동업자와 열 사이에 공간을 만듭니다

예시 용법

.container {
    ...
    /* Create 10 pixels of space on the top and bottom of each Grid element,
    and 20 pixels of space on the left and right sides. */
    grid-gap: 10px 20px;
}

메쉬 자동 행: 암시적으로 작성된 행의 크기를 정의합니다

.

격자 자동 열: 은밀하게 만든 열의 크기를 정의합니다

예시 용법

.container {
    ...
    grid-auto-columns: 1fr;
}

위의 예를 들어, 우리가 이 속성을 정의할 때, 은밀하게 격자에 추가된 다른 열은 자동으로 페이지의 '사용 가능한 공간' 을 사용합니다.주:fr는 자유 공간을 대표하지는 않지만, 이 단원이 어떻게 일을 하는지 생각하는 간결한 방식이다.

메쉬 열(약자)

메쉬 행(약자)

격자선 열은 다음 속성의 약어입니다.

격선기둥 기점

그리드 기둥 끝

격자선 행은 다음 속성의 약자입니다.

메쉬 행 시작

격자 배열 말단

-start 속성은 격자에 처음 놓인 항목의 위치를 알려주고, -end 속성은 격자에 놓일 요소가 어느 점에서 멈춰야 하는지 알려준다.
지정한 값은 축선을 가리킨다.정사각형의 상자를 생각해 보자. 왼쪽의 선은 첫 번째 줄이고, 오른쪽의 선은 두 번째 줄이다.

예시 용법

.container {
    ...
    /* Start at column line 2, end at column line 4*/
    grid-column-start: 2;
    grid-column-end: 4;

    /* Shorthand */
    grid-column: 2 / 4;
}

메쉬 템플릿 영역
격자선 템플릿 영역은 격자선의 다른 부분을 명명하는 방법입니다.사용되는 속성을 격자선 템플릿 영역이라고 합니다.다음은 사용법의 기본 문법이다.

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
}

문법은 대체로 실제 격자의 구조를 따른다.따라서 나타나는 앞의 세 열은 각각sidebar-1,content,sidebar-2라고 부른다.
격자선의 아래 행과 같은 다른 영역을 계속 정의하려면 새 행에서 동일한 이름을 사용하여 전체 영역을 계속 정의하거나 새 이름을 사용하여 격자선의 새 부분을 식별합니다.

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
      "sidebar-1 content sidebar-2"
      "footer footer footer";
}

페이지에 있는 각 요소의 미리 정의된 클래스 이름을 사용하여 격자 템플릿 영역 이름을 사용하여 이러한 요소를 배치할 위치를 정의할 수 있습니다.다음 예는 다음과 같습니다.

.footer
{
    grid-area: footer;
}

.item1
{
    grid-area: sidebar-1;
}

.item2
{
    grid-area: content;
}

.item3
{
    grid-area: sidebar-2;
}

이것은 선택한 모든 항목에 대해 우리가 지정한 격자 정의 영역에 놓는 것을 의미합니다.배치된 요소는 격자선 영역을 사용하여 격자선의 명명된 부분으로 자연스럽게 배치됩니다.

결론
이것은 CSS 격자에 대한 매우 빠른 소개입니다. 왜냐하면 저는 다음과 같은 자원을 통해 배운 기본 개념을 정리하고 싶습니다.
Wes Bos: CSS Grid Course
Mozilla Developer Network: CSS Grid Layout
읽어주셔서 감사합니다.👋! 만약 당신이 나의 인터넷 개발 여행에서 나를 따르는 것에 흥미가 있다면, 계속 나를 주목해 주십시오😄