대부분의 레이아웃 요구에 대한 4 개의 CSS 그리드 특성 (및 하나의 값)

CSS 그리드는 강력한 웹 사이트 레이아웃 시스템을 제공합니다. CSS- 트릭 가이드는 그리드의 속성 및 레이아웃 예제에 대한 포괄적 인 개요를 제공합니다. 우리는 반대의 접근 방식을 취하여 대부분의 레이아웃 요구 사항을 충족하는 데 필요한 최소 그리드 속성 세트를 보여줍니다.

이 5 가지 속성은 빠르게 시작하는 데 도움이됩니다.

• display (그리드 값 용)
• grid-template-columns
• grid-gap
• grid-auto-flow
• grid-column / grid-row

여기 단순성이 있습니다. 중소형 및 대형 화면에 대해 다음 레이아웃을 구현한다고 가정 해 봅시다.

다음은 사용할 수있는 마크 업입니다.

<nav><ul>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul></nav><div></div>

기준 스타일을 적용하면 다음과 같은 결과를 얻을 수 있습니다.이 결과는 작은 화면에 충분합니다.

이제 우리는 그리드 특성을 더 깊이 이해할 수 있습니다!

display: grid

먼저, 페이지의 어느 부분이 그리드 레이아웃과 정렬되어야하는지 결정해야합니다. 전체 페이지에 대해 단일 그리드 레이아웃을 정의 할 수 있습니다. 그러나 뉴스 사이트와 같은 매우 복잡한 구조가있는 웹 사이트의 경우 대형 그리드를 처리하면 신속하게 통제 할 수 없습니다. 이 경우 여러 독립 그리드 컨테이너로 분리하는 것이 좋습니다.

이와 같이:

그리드와 그리드가 아닌 것 사이의 경계를 어디서 그리나요? 다음은 내가 따르는 개인적인 규칙입니다.

페이지의 특정 부분의 레이아웃이 인접한 또는 주변 페이지 부품의 그리드에 맞지 않으면 해당 부분을 자체 그리드 컨테이너로 설정하십시오.

다음 이미지에 표시된대로 .container-main 클래스로 페이지 섹션에 그리드 라인을 그 렸습니다. 태그의 .container-inner 클래스의 일부는 행의 그리드에 정확히 맞지 않음을 알 수 있습니다.

더 미세한 라인 그리드를 선택하면 그리드 주위에 작은 부분이 적합합니다. 별도의 그리드 컨테이너가 필요하지 않습니다.

먼저 .container-main 그리드 컨테이너로 변환합시다. 다음은 CSS 그리드의 기본 빌딩 블록입니다. display 속성을 사용하여 요소를 그리드 컨테이너로 변환합니다.

 .Container-Main {
  디스플레이 : 그리드;
}

또한 다른 그리드 컨테이너에 대해서도 동일한 작업을 수행해야합니다.

 .Container-Inner {
  디스플레이 : 그리드;
}

.Container-Nav {
  디스플레이 : 그리드;
}

grid-template-columns 사용하여 필요한 열을 정의하십시오

다음으로, 각 그리드 컨테이너에 필요한 열 수와 해당 열의 너비를 정의합니다. 열 수에 대한 가이드 라인 : 다른 화면 크기에 필요한 최대 열 수의 최소 공통된 배수를 사용하십시오.

이것은 어떻게 작동합니까? .container-main 요소에는 중간 크기의 화면에 두 개의 열이 있습니다. 이를 큰 화면 (3 개의 열)의 열 수를 곱하면 총 6 개의 열이 나타납니다.

내비게이션 ( .container-inner Element)에 대해서도 동일한 작업을 수행 할 수 있습니다. 중간 크기 화면에는 세 개의 열이 있으며,이를 큰 화면에 1 개로 곱하면 총 3 개의 열이 있습니다.

.container-nav 요소에는 열 번호가 없습니다. 이 경우 그리드 시스템은 열 수를 메뉴 요소 수로 자동 조정해야합니다. 내비게이션에서 항목을 추가하거나 삭제하는 것이 일반적이며, 그에 따라 응답하면 그리드가 나중에 구현하는 데 도움이되는 것이 좋습니다.

자, 각 그리드 컨테이너의 열 수를 정의합니다. grid-template-columns 속성을 사용하여 제자리에 설정합시다. 그러나 먼저 몇 가지 세부 사항이 있습니다.

• grid-template-columns 속성은 그리드 컨테이너에만 사용됩니다. 다시 말해, 컨테이너 내부의 그리드 프로젝트에서는 찾을 수 없습니다 (적어도 올바르게).
• 이 속성은 열의 수와 열의 너비를 모두 정의하는 다양한 값을 허용합니다. 우리가 여기서 관심있는 것은 분수 (FR) 단위입니다. Robin의 개요는 그리드에 고유하고 그리드 요소를 그리드 컨테이너에 넣는 방법을 계산하는 데 큰 도움이되기 때문에 Robin의 개요를 확인하는 것이 좋습니다.

.container-main 에서 6 개의 Monospace 열을 사용해야합니다. 우리는이 방법을 쓸 수 있습니다.

 .Container-Main {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1FR 1FR 1FR 1FR 1FR 1FR 1FR 1FR;
}

또는 repeat() 함수를 사용하여 더 읽을 수있는 것으로 단순화 할 수 있습니다.

 .Container-Main {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (6, 1fr);
}

이 지식을 사용하여 .container-inner 요소에도 적용하고 세 개의 열이 필요하다고 결정합니다.

 .Container-Inner {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 1fr);
}

grid-gap 사용하여 그리드 프로젝트간에 간격을 추가하십시오

기본적으로 그리드는 그리드 컨테이너의 모든 공간을 사용하여 그리드 프로젝트를 수용합니다. 요소를 가깝게 유지하는 것은 설계 요구 사항 일 수 있지만, 우리가 만드는 특정 레이아웃에는 그렇지 않습니다. 우리는 사물 사이의 호흡 공간을 원합니다!

이를 위해서는 grid-gap 속성이 있습니다. 다시 말하지만, 이것은 그리드 컨테이너만으로 작동하는 속성입니다. 그리드 프로젝트간에 수직 및 수평 간격을 만드는 것입니다. 실제로 grid-row-gap 의 수직 간격 기능과 grid-column-gap 의 수평 간격 기능을 결합한 약어 속성입니다. 편리하게도, 우리는이를 분류 할 수 있지만,이 경우 각 방향에서 동일한 양의 간격을 사용하면 약어 grid-gap 작성하기가 더 쉽습니다.

.container-main 의 그리드 프로젝트, .container-inner 의 10px 간격 및 .container-nav 의 5px 간격간에 20px 간격을 갖기를 원합니다. 괜찮아요! 각 그리드 컨테이너에는 한 줄의 코드 만 필요합니다.

 .Container-Main {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (6, 1fr);
  그리드 갭 : 20px;
}

.Container-Inner {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 1fr);
  그리드 갭 : 10px;
}

.Container-Nav {
  디스플레이 : 그리드;
  그리드 갭 : 5px;
}

grid-column 과 grid-row 사용하여 각 그리드 프로젝트의 크기를 결정하십시오.

이제 레이아웃을 우리가 원하는 것으로 바꿔야합니다!

첫 번째는 grid-column 속성으로 그리드 프로젝트를 N 열로 확장 할 수 있습니다. HTML 테이블의 rowspan 속성과 매우 흡사하다고 생각되면 여러 행에 걸쳐 셀을 확장 할 수 있습니다.

.container-main 요소의 그리드 .item 과 .container-inner 의 .item-inner 요소에서 사용하면 다음과 같습니다.

 .item {
  그리드-컬럼 : 스팬 6;
}

.item-inner {
  그리드-컬럼 : 스팬 3;
}

우리가 여기서 이야기하는 것은 각 항목이 메인 컨테이너에 6 개의 행과 내부 컨테이너에 3 개의 행에 걸쳐 있다는 것입니다. 이것은 각 컨테이너의 총 열 수입니다.

CSS 그리드의 흥미로운 점은 그리드 라인을 지명 할 수 있다는 것입니다. 그들은 상자에 암시적인 이름을 가지고 있지만, 그 이름은 트랙의 각 열의 시작과 끝 줄을 구별하는 효과적인 방법입니다.

프로젝트가 다른 중단 점으로 표시되어야하는 열과 행의 수를 변경할 수 있습니다.

 @Media 화면 및 (min-width : 600px) {
  .item-type-b {
    그리드-컬럼 : 스팬 3;
  }

  .item-inner {
    그리드-컬럼 : 스팬 1;
  }
}

@Media 화면 및 (min-width : 900px) {
  .item {
    그리드-컬럼 : 스팬 2;
    그리드 로우 : 스팬 2;
  }

  .item-type-b {
    그리드 로우 : 스팬 1;
  }

  .item-inner {
    그리드-컬럼 : 스팬 3;
  }
}

grid-auto-flow 사용하여 요소 배치를 제어하십시오

CSS 그리드는 요소를 하나씩 행에 하나씩 배치합니다. 이것이 바로이 예제의 결과가 현재 다음과 같습니다.

컬럼 별 배치는 grid-auto-flow 속성을 column 설정하여 달성 할 수 있습니다 ( row 기본값입니다). 우리의 레이아웃은 두 경우 모두 원주민 배치의 혜택을받습니다. 첫째, 메뉴 항목이 결국 가로로 나타납니다. 둘째, 컨테이너 클래스의 요소를 원하는 조합으로 가져옵니다.

최종 결과

결론 : 다수 또는 적은 규범?

그리드 시스템을 통해 우리는“필요한만큼 많은 사양을 수행하지만 가능한 한 적은 사양을 수행 할 수 있습니다”라는 모토 아래에서 작업 할 수 있습니다. CSS 그리드를 사용하여 빌드하거나 복잡한 레이아웃을 제작하기 위해 알아야 할 금액만을 설명하기 위해 요소를 CSS 그리드 컨테이너로 변환하고 그리드 프로젝트로 변환하는 데 필요한 일부 사양 만 포함했습니다.

CSS 그리드는 다음과 같은 추가 사용 사례를 지원합니다.

• 자동 위치에 더 많은 의존을 위해 적은 사양을 개발하고자합니다.
• 결과 레이아웃에 대한 자세한 내용을 결정하기 위해 더 많은 사양을 개발하고자합니다.

첫 번째 사례가 적용되면 다음과 같은 다른 그리드 옵션을 고려할 가치가 있습니다.

• grid-template-columns 사용하여 그리드를 만들 때 auto 키워드를 사용하여 그리드 시스템이 각 열의 너비를 자동으로 결정하거나 min-content , max-content 또는 fit-content 설정을 사용하여 기존 컨텐츠로 조정할 수 있습니다.
• repeat , auto-fill , auto-fit 및 minmax 사용하여 그리드 시스템에서 필요한 열 수를 자동으로 결정할 수 있습니다. 미디어 쿼리조차도 중복 될 수 있으며 이러한 도구는 더 많은 미디어 쿼리를 추가하지 않고도 유연성을 높이는 데 도움이됩니다.

이 주제에 대해 추천하는 몇 가지 기사는 다음과 같습니다. CSS 그리드 닌자가 되십시오! 및 CSS 그리드의 자동 기준 열 : 자동 auto-fit auto-fill .

두 번째 사례가 적용되면 CSS Grid는 더 많은 설정 옵션을 제공합니다.

• grid-template-columns 속성을 사용하여 선택한 단위 (예 : PX 또는 %)를 사용하여 열의 너비를 명시 적으로 지정할 수 있습니다. 또한, grid-template-rows 속성은 특정 행 수가있는 경우 행의 수와 너비를 정의하는 데 사용될 수 있습니다.
• 특정 열 또는 줄 번호를 grid-column 및 grid-row 의 값으로 정의 할 수도 있습니다 (또는 grid-column-start , grid-column-end grid-row-start 또는 grid-row-end 특성을 사용하십시오).

우리는 아직 CSS 그리드 정렬조차 참여하지 않았습니다! 그럼에도 불구하고 우리는 주제를 논의하지 않고 많은 일을 할 수 있습니다.이 주제는 CSS 그리드가 얼마나 강력한지를 보여줍니다.

위 내용은 대부분의 레이아웃 요구에 대한 4 개의 CSS 그리드 특성 (및 하나의 값)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!