CSS 그리드 레이아웃에 대한 초보자 가이드

CSS 그리드 레이아웃 모듈은 웹 사이트를 구축하는 방식에 혁명을 일으켰습니다. 까다로운 해킹과 과거의 독창적 인 솔루션없이 고급 레이아웃을 허용하는 도구를 제공합니다. 이 그리드 소개에서 그리드 레이아웃이 어떻게 작동하는지에 대한 기본 사항을 살펴보고 실제로 사용하는 방법에 대한 간단한 예를 많이 살펴볼 것입니다. 키 테이크 아웃

CSS 그리드 레이아웃 소개 :이 기사는 CSS의 강력한 레이아웃 시스템으로서 CSS 그리드에 대한 기본적인 이해를 제공하여 요소를 구조화 된 콘텐츠 배치를위한 행 및 열의 그리드 프레임 워크로 변환하는 방법을 설명합니다. 요소를 그리드 컨테이너로 바꾸는 기본 사항과 직접 어린이를 그리드 품목으로 전환하는 기본 사항을 다룹니다.

그리드 구조 및 항목 배치 : 그리드-템플릿-컬럼, 그리드-템플릿 줄 및 그리드-테드 플레이트 영역과 같은 속성을 사용한 그리드 구조 정의를 포함하여 CSS 그리드의 필수 기능이 탐색됩니다. 이 자습서는 갭 속성이있는 간격 그리드 항목을 보여주고 정확한 레이아웃을 위해 특정 행과 열로 구성합니다.

CSS 그리드를 사용한 반응 형 디자인 : 응답 형 웹 디자인을위한 CSS 그리드의 적응성이 강조되므로 미디어 쿼리를 사용하여 다양한 화면 크기의 그리드 레이아웃을 변경하는 방법을 보여줍니다. 겹치는 그리드 항목과 미디어 쿼리없이 반응 형 레이아웃 생성과 같은 고급 기술도 논의되어 현대 웹 디자인에서 CSS 그리드의 다양성을 강조합니다.

그리드 레이아웃을 시작하기 그리드는 콘텐츠를 배치 할 수있는 열과 행의 프레임 워크입니다. (테이블 레이아웃과 비슷하지만 스테로이드에 있습니다!)
1. 그리드를 시작하는 것은 이것을하는 것만 큼 간단합니다.

   . CSS 그리드 기본 사항 : 디스플레이 : SitePoint의 그리드 (@SitePoint) (@SitePoint) .

위의 예에서는 컨테이너 역할을하는
요소가 있습니다. 그 안에는 몇 가지 요소가 있습니다.이 요소는 이제 그리드 항목입니다.

지금까지, 우리는 디스플레이없이 동일한 결과를 얻을 수 있으므로 많은 것을 달성하지 못했습니다. 추가 읽기 :

위의 데모에서 컨테이너는 뷰포트 중앙에 있습니다. 그리드를 사용하여 요소를 센터링하는 것에 대해 자세히 알아보십시오

그리드 항목 사이의 간격을 설정 첫 번째 공간 공간 우리의 divs가 갭 속성과 약간 떨어져 나가자 :

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

CSS 그리드 기본 사항 : gap by sitepoint (@sitepoint) 코드 펜.
갭 속성은 우리가 곧 볼 수 있듯이 수직 및 수평으로 요소 사이에 공간을 삽입합니다. (필요한 경우 다른 수평 및 수직 간격을 설정할 수 있습니다.)

추가 읽기 : 갭 속성에 대해 자세히 알아보십시오.

그리드 열 설정 현재, 우리는 "암시 적"그리드를 가지고 있습니다. 즉, 브라우저는 아직 행이나 열을 지정하지 않았기 때문에 자체 그리드를 파악하고 있음을 의미합니다. 기본적으로 하나의 열과 4 개의 행 (각 그리드 항목마다 하나씩)을 얻습니다. 이제 몇 가지 열을 지정하겠습니다 :

그리드-템플릿-컬럼을 사용하면 폭이 1fr의 너비 또는 사용 가능한 공간의 1 개를 갖는 4 개의 열을 원한다고 지정합니다. (1FR ​​1FR 1FR 1FR 대신 매우 편리한 반복 () 함수를 사용하여 반복 (4, 1FR)을 쓸 수 있습니다. 이제 우리의 그리드 항목은 아래 그림과 같이 한 줄로 배치됩니다.

CSS 그리드 기본 사항을 참조하십시오 : sitepoint (@SitePoint) 코드 펜.

• 추가 읽기 :
그리드-템플릿-컬럼에 대한 추가 정보 유연한 길이 (FR) 장치에 대해 자세히 알아보십시오 그리드의 반복 () 함수를 사용하는 방법

그리드 항목을 행과 열로 구성 이제 표준 웹 페이지 레이아웃에서 볼 수 있듯이 그리드 항목을 행과 열로 정리해 봅시다. 첫째, 그리드 테드 플레이트 행 속성으로 3 개의 행을 지정합니다 우리가 위의 펜에 해당 라인을 추가하면 그리드 품목 이이 행과 열에 맞도록 원하는 방법을 지정하지 않았기 때문에 아직 많은 일이 일어나지 않을 것입니다. (Auto Auto Auto는 반복 () 함수를 사용하여 반복 (3, 자동)으로 쓸 수 있습니다. 추가 읽기 :

그리드-템플릿 열에 대한 자세한 내용 그리드의 반복 () 함수를 사용하는 방법

그리드에 그리드 품목을 그리드에 배치합니다 브라우저의 개발자 도구는 CSS 그리드 레이아웃을 이해하는 데 매우 편리합니다. 지금까지 코드를 검사하면 아래 그림과 같이 그리드를 정의하는 수평 및 수직 그리드 라인을 볼 수 있습니다.

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

5 개의 수직 그리드 라인과 4 개의 수평 그리드 라인이 있으며 모두 번호가 매겨집니다. 이 그리드 라인을 사용하여 그리드 항목을 배치하는 방법을 지정할 수 있습니다. 먼저

요소를 4 개의 열과 1 행에 걸쳐 설정하겠습니다.

이것은

가 그리드 열 선에서 1에서 시작하고 열 선 라인에서 끝나라고 지시합니다. 또한

는 첫 번째 그리드 행 줄에서 시작하도록 지시합니다. 엔드 라인이 지정되지 않기 때문에 다음 행 선에만 걸리므로 그리드 로우 : 1은 그리드 로우 : 1 / 2와 같습니다. : 와 비슷한 일을하자

여기서 유일한 차이점은 그리드 행 3과 4 사이에

를 설정했다는 것입니다. 이제 및

요소를 배치합시다 :

결과는 아래 펜에 표시됩니다 CSS 그리드 기본 사항 : Codepen에서 SitePoint (@SitePoint) 로 번호가 매겨진 항목 배치.

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

우리는 이제 해킹, 오버플로 및 과거의 다른 악몽이없는 유연하고 반응이 좋은 레이아웃을 가지고 있습니다. 그리드 항목에 콘텐츠를 추가하면 해당 컨텐츠가 포함되도록 확장되며 나란히 열의 높이는 항상 동일합니다. (Noughties에서 CSS와 함께 일하는 사람들의 경우, 동등한 높이 열을 달성하는 것은 악몽이었습니다!)

번호가 매겨진 그리드 라인에 대해 알아야 할 유용한 것들

위의 이미지를 다시 살펴보면 바닥을 따라 수직선이 음수로 이름이 지정되어 있음을 알 수 있습니다. 각 그리드 라인의 양수 및 음수가 있습니다. 그리드 라인이 많을 때와 같은 많은 용도가 있으며 반드시 얼마나 많은지 알 수는 없습니다. 마지막 수직선은 5와 -1의 번호가 매겨 지므로

요소가 그리드 -컬럼 : 1 / -1을 사용하도록 설정할 수 있습니다. 그리드에는 스팬 키워드가 있습니다.이 키워드는 여러 행이나 열에 걸쳐 요소를 알려주는 데 사용할 수 있습니다.

레이아웃의 또 다른 옵션은 그리드-컬럼 : 1 / span 4를 작성하는 것입니다. 이것은 요소가 첫 번째 그리드 라인에서 시작하여 4 개의 열 모두를 가로 지르도록 지시합니다.

. 위의 펜에서 이러한 변형을 시도하십시오 추가 읽기 :

그리드 라인에 대해 자세히 알아보십시오 그리드 라인 번호가있는 방향은 레이아웃의 쓰기 모드의 영향을받습니다. 그리드-컬럼에 대해 자세히 알아보십시오. 그리드 사양의 스팬 키워드에 대해 읽으십시오
• 명명 된 그리드 라인을 사용하여 그리드 항목 배치 번호가 매겨진 그리드 라인을 사용하여 그리드에서 요소를 구성하는 방법을 보았습니다. 그러나 우리는 또한 우리의 그리드 라인의 일부 또는 전부에 이름을 부여하고 대신 참조 할 수 있습니다.이를 대신 참조 할 수 있습니다.이를 조금 더 직관적이며 그리드 라인 계산을 막을 수 있습니다.
• . 라인을 포함하도록 레이아웃을 업데이트하겠습니다
위의 코드에서 우리는 단 3 개의 수직 그리드 라인을 지정했습니다. 이름은 기둥 너비 옆에 사각형 괄호로 들어가서 열 선을 나타냅니다. 이제 우리는 이제 그리드에 몇 가지 요소를 배치 할 수 있습니다.
• 우리는 아래 데모 에서이 코드를 실제로 볼 수 있습니다. CSS 그리드 기본 사항 : Codepen에서 sitepoint (@sitepoint) 로 명명 된 라인을 가진 항목을 배치합니다.
추가 읽기 :

명명 된 그리드 라인에 대해 자세히 알아보십시오 그리드 사양에서 명명 된 라인에 대해 읽으십시오

명명 된 그리드 영역을 사용하여 그리드 항목 배치 그리드 레이아웃의 가장 흥미롭고 "디자이너 친화적 인"기능 중 하나는 그리드 영역, 즉 그리드의 하나 이상의 셀을 단순하고 직관적 인 방식으로 이름을 지정 한 다음 해당 이름을 사용하는 기능입니다. 그리드 품목을 배치하십시오. 다음과 같이 작동합니다.

그리드-템플릿 영역을 사용하여, 우리는 요소를 원하는 방법을 지정하는 간단한 텍스트 그리드를 작성했습니다. 이제 우리는이 영역 이름을 요소에 적용하면됩니다.

따라서

는 네 개의 열 모두에 걸쳐 있고, 요소는 두 번째 행의 첫 열에 앉아 있습니다. 우리는 이것을 아래 펜에서 실제로 볼 수 있습니다.

CSS 그리드 기본 사항 : Codepen에서 sitepoint (@SitePoint) 별로 이름 영역을 사용하여 항목 배치.

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

이 코드는 번호가 매겨 지거나 명명 된 선을 사용하든 이전보다 훨씬 간단합니다. 이와 같은 명명 된 그리드 영역을 사용하는 것은 실제 코드를 작성하는 대신 Wysiwyg 편집기를 사용하는 것과 같이 거의 당황스럽게 간단합니다. 그러나 부정 행위가 아닙니다! 정말 멋지다.

라인 번호와 그리드 영역이있는 선명 라인을 사용하여 우리는 그리드 영역을 정의하기 위해 라인 번호 및/또는 명명 된 선을 사용할 수도 있다는 점에 주목할 가치가 있습니다. 예를 들어, 그리드-테일 플레이트 영역 속성을 사용하는 대신 다음과 같은 일을 할 수 있습니다. 패턴은 행 시작 / 열 시작 / 행-엔드 / 열 엔드입니다. Codepen

에서 이것의 데모를 확인할 수 있습니다. 개인적으로, 나는이 행과 열의 패턴을 기억하기가 정말 어렵다는 것을 알았지 만 그리드의 가장 큰 장점은 같은 일을하는 방법이 많이 있다는 것입니다.

. 그리드 항목의 레이아웃 변경 오래된 날에, 우리가 어느 시점에서 페이지 요소의 레이아웃을 변경하기로 결정했다면, 많은 코드 리팩토링이 발생했을 것입니다. 예를 들어, 요소를 레이아웃 끝까지 확장하려면 어떻게해야합니까? 그리드 영역을 사용하면 매우 쉽습니다. 우리는 이것을 할 수 있습니다 :

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

우리는 바닥 글에서 그리드 셀을 제거하여 아래 펜에서 볼 수있는 것을 따로 할당했습니다. CSS 그리드 기본 사항 : Codepen에서 sitepoint (@SitePoint) 별로 명명 된 영역 2를 사용하여 항목 배치.

우리는 어딘가에 빈 셀을 원한다고 결정할 수도 있습니다. 우리는 하나 이상의 기간을 사용하여 다음과 같이합니다.

이 결과를 예측할 수 있는지 확인한 다음이 Codepen 데모를 확인하십시오. 추가 읽기 :

그리드-템플릿 영역에 대해 자세히 알아보십시오 그리드 지역 속성에 대해 자세히 알아보십시오

그리드 레이아웃과 함께 미디어 쿼리를 사용하는 우리는 종종 단일 열에 그리드 요소를 쌓는 것과 같은 작은 화면에서 다른 레이아웃을 원합니다. 이를 수행하는 쉬운 방법은 미디어 쿼리를 통해 그리드 영역을 재정렬하는 것입니다.

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

우리는 이제 단일 열만 지정하고 해당 열에서 요소의 순서를 설정했습니다. CSS 그리드 기본 사항을 참조하십시오 : CodePen에서 sitepoint (@SitePoint)

>에 의해 미디어 쿼리 사용.


위의 펜의 0.5x 버튼을 눌러 레이아웃이 어떻게 반응하는지 확인하십시오 (또는 펜에서 펜을보고 뷰포트를 넓히고 좁 힙니다). 그리드 항목의 디스플레이 순서 변경

우리는 이제 그리드 레이아웃에서 요소의 디스플레이 순서를 변경하는 것이 얼마나 쉬운 지 확인하는 것이 좋습니다. 위의 예에서 소스 순서는

, , 및

이지만 미디어 쿼리에서 요소가 요소 위에 나타나도록 설정했습니다. 그리드로 요소의 디스플레이 순서를 교환하기가 쉽습니다! 우리는 그들 모두의 디스플레이 순서를 완전히 뒤집을 수도 있습니다.

명명 된 요소를 사용하지 않더라도 그리드 요소를 재정렬 할 수 있습니다. 기본적으로 그리드 항목은 HTML 소스 순서에 따라 배치됩니다. 또한 기본 순서가 0입니다.이 순서 속성을 사용하여 요소의 시각적 배열을 변경할 수 있습니다. 주문 값이 낮을수록 요소가 빨리 나타납니다. 음의 정수조차도 사용할 수 있으므로

요소가 -1 인 경우 먼저 나타납니다.

. 위에서 볼 수 있듯이 요소를 주문하기 위해

, 의 순서 값을 각각 1, 2 및 3으로 설정할 수 있습니다. (라이브 데모를 위해이 펜을 확인하십시오.)

주의 단어 : 재정렬 된 요소는 접근성에 대한 악몽이 될 수 있으며, 화면 주위에 초점이 예측할 수 없을 정도로 점프 할 수 있으므로 드물게 사용하십시오.

. 추가 읽기 :

주문 속성에 대한 공식 사양 접근성 문제에 대한 섹션을 포함하여 MDN에 설명 된 주문 속성.

미디어 쿼리가없는 반응 형 그리드 레이아웃 우리는 다른 화면 크기에 레이아웃을 반응 할 수 있다는 것을 위에서 보았습니다. 첫째, 열 너비를 FR과 같은 유연한 장치로 설정하면 레이아웃이 필요에 따라 성장하고 줄어들 수 있습니다. 둘째, 미디어 쿼리를 사용하여 특정 중단 점에서 레이아웃을 재구성 할 수 있습니다. 그리드 레이아웃에는 미디어 쿼리를 사용하지 않고 레이아웃 리플 로우를 허용하는 도구가 있습니다. 그러나 우리는 위에서 작업 한 레이아웃으로이를 달성 할 수 없습니다. 각 열이 동일한 너비를 공유하는 더 간단한 레이아웃에만 적용됩니다.

다음 html을 고려하십시오 :

넓은 화면에 Divs를 나란히 앉아 작은 화면에 쌓아 봅시다 :

아래 펜에서 결과를 볼 수 있습니다. Codepen에서 itepoint (@sitepoint) 에 의한 미디어 쿼리가없는 펜

CSS 그리드 기본 사항을 참조하십시오.
(다시, 위의 펜의 0.5x 버튼을 눌러 레이아웃이 어떻게 반응하는지 확인하십시오.) 그 코드는 조금 더 발전되어 있으며 CSS Grid Reture () 함수를 사용하는 방법에 대해 자세히 설명합니다. 여기에 그것을 보여주는 주요 목적은 그리드 레이아웃으로 가능한 것이 무엇인지 감각하는 것입니다.
• . 추가 읽기 :
  자동 맞춤 키워드에 대해 자세히 알아보십시오 min () 함수와 함께 minmax () 함수를 사용하는 것에 대해 자세히 알아보십시오.
  • 그리드의 겹치는 요소 그리드 레이아웃을 만든 후에는 각 그리드 항목을 자체 별도의 그리드 영역에 할당하는 것 이상을 수행 할 수 있습니다. 우리는 동일한 그리드 영역을 부분적으로 또는 전체적으로 공유하기 위해 그리드 품목을 쉽게 설정할 수 있습니다. 이를 통해 우리는 겹치는 요소와 까다로운 코드없이 아름답고 창의적인 레이아웃을 만들 수 있습니다. 이미지가 포함 된 간단한 그리드와 이미지를 부분적으로 다루는 텍스트를 작성하겠습니다. HTML은 다음과 같습니다
  이제 우리는 div와 이미지 사이에 부분적으로 공유되는 행과 열을 할당 할 것입니다 :
  • 결과는 다음 Codepen 데모에 표시됩니다 CSS 그리드 기본 사항을 참조하십시오 : Codepen에서 sitepoint (@SitePoint) 에 의한 계층 그리드 요소.

  div는 소스 순서의 이미지 뒤에 오기 때문에 이미지 위에 나타납니다. z-index를 적용하여 다른 요소를 다른 요소 위에 변경할 수 있습니다. 예를 들어, 위의 펜의 이미지에 2의 z-index를 설정하십시오. 이제 div. 의 일부를 다룰 것입니다 추가 읽기 :

  위의 데모에서 이미지의 위치를 ​​이해하려면 CSS 객체-피트 및 객체 위치를 사용하는 방법을 확인하십시오. z-index 속성에 대해 자세히 알아보십시오

  포장

  이 기사는 CSS 그리드 레이아웃이 수행 할 수있는 일에 대한 기본 소개입니다. 희망은 그것이 추가 학습과 발견을위한 스프링 보드를 제공하기를 희망합니다. 그리고 그리드에 대해 배울 수있는 거대한

  금액이 있습니다.

  그리드 vs flexbox 영원한 질문은 그리드 또는 플렉스 박스를 사용해야하는지 여부입니다. 이 두 레이아웃 도구가 수행 할 수있는 것 사이에는 약간의 겹침이 있다는 것은 사실입니다. 겹치는 경우 종종 각 시나리오에서 더 나은 툴킷을 가진 몇 가지 테스트를 수행 할 가치가 있습니다.

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  그러나 일반적으로 는 이것을 기억하십시오 :
  Flexbox는 주로 요소를 단일 방향으로 배치하도록 설계되었습니다 (요소가 선을 가로 질러 감싸더라도). 그리드는 요소를 두 방향으로 배치하도록 설계되어 수평 및 수직으로 정렬됩니다.

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  이러한 이유로 그리드는 일반적으로 전체 페이지 레이아웃에 더 나은 옵션이며, Flexbox는 메뉴와 같은 것을 배치하는 데 더 좋습니다. 그리드와 Flexbox를보다 심층적으로 비교하려면 Flexbox 또는 CSS 그리드를 확인하십시오. 말이되는 레이아웃 결정을 내리는 방법그리드에 대한 브라우저 지원 2016 년 에이 기사를 처음 게시했을 때 그리드는 브라우저에 상당히 새로운 것이 었으며 지원은 보편적이지 않았습니다. 요즘에는 모든 주요 브라우저가 그리드를 지원합니다. 지원하지 않는 몇 개의 오래된 브라우저가 떠 다니지 만, 많은 경우에 해당 브라우저는 여전히 콘텐츠를 충분히 표시합니다. 좋은 캐치-모든 접근 방식 중 하나는 그리드 레이아웃을 지원하지 않는 브라우저의 낙하 역할을 할 수있는 모바일 장치의 단일 열 레이아웃으로 시작하는 것입니다. 그리드 스타일을 지원하는 브라우저의 미디어 쿼리를 통해 추가 할 수 있습니다. 더 넓은 화면에 표시됩니다. Caniuse의 그리드에 대한 최신 브라우저 지원을 확인할 수 있습니다. 그리드 학습 리소스 마지막으로, 몇 가지 추가 학습 리소스로 끝내자. 많은 놀라운 사람들이 그리드에 튜토리얼, 비디오, 책 등을 제공했습니다. 다음은 다음과 같습니다.

  Tiffany Brown의 CSS Master, 3 판 는 CSS에 대한 훌륭한 소개이며, 그리드 및 기타 레이아웃 방법을 사용하는 방법에 대한 심층적 인 지침이 있습니다.

. MDN 그리드 참조. Rachel Andrew의 예제 사이트에 따른 그리드. (실제로 Rachel Andrew는 많은 놀라운 기사, 튜토리얼, 비디오 및 그리드 레이아웃에 관한 책을 가지고 있으며, 가장 중요한 전문가입니다. Googling“Rachel Andrew Grid”는 학습 그리드를위한 수많은 자료를 가져올 것입니다.) > Jen Simmons의 레이아웃 랜드 YouTube 시리즈. (Jen은 인터넷 검색 할 가치가있는 또 다른 이름입니다.)

Kevin Powell은 YouTube에서 환상적인 그리드 튜토리얼을 많이 제공합니다. CSS- 트릭은 CSS 그리드에 대한 완전한 안내서를 제공합니다.

CSS 그리드 레이아웃에 대한 FAQS CSS 그리드 레이아웃이란 무엇입니까?

CSS 그리드 레이아웃은 웹 페이지에 복잡한 2 차원 그리드 기반 레이아웃을 만들 수있는 CSS의 레이아웃 시스템입니다. 그리드에서 요소를 설계하고 위치시키는보다 유연하고 효율적인 방법을 제공합니다.

내 웹 페이지에서 CSS 그리드를 활성화하는 방법은 무엇입니까?

CSS 그리드를 활성화하려면 디스플레이를 사용할 수 있습니다. 그리드; CSS 코드의 속성. 이렇게하면 선택한 컨테이너가 그리드 컨테이너가됩니다.

• CSS 그리드의 주요 구성 요소는 무엇입니까? CSS 그리드의 주요 구성 요소는 그리드 컨테이너 및 그리드 품목입니다. 컨테이너는 디스플레이를 사용하여 정의됩니다. 그리드; 속성 및 항목은 컨테이너 내부에 배치 된 요소입니다. CSS 그리드에서 행과 열을 어떻게 정의합니까?
그리드 테마 플레이트와 같은 속성을 설정하여 행과 열을 정의 할 수 있습니다. -Rows, Grid-Template-Columns 또는 속성 속성 그리드-템플릿 사용.
• CSS 그리드에 다른 열 너비와 행 높이를 가질 수 있습니까?
• 예, 다르게 지정할 수 있습니다. 유연한 크기 조정을위한 고정 길이, 백분율 또는 FR 장치와 같은 그리드-템플릿 정의에서 다른 값을 사용하여 열 폭과 행 높이. 그리드 내에서 그리드를 중첩 할 수 있습니까?
  예, 그리드 내에서 그리드 자체를 그리드 컨테이너로 만들어 복잡한 레이아웃을 만들 수 있습니다.

  CSS 그리드는 응답이 있습니까? 그리드가 다른 화면 크기에 적응하도록 할 수 있습니까?

  예, CSS 그리드는 응답 할 수 있습니다. 미디어 쿼리, 백분율 또는 상대 장치를 사용하여 그리드 레이아웃을 다른 화면 크기 및 장치에 적응할 수 있습니다.

위 내용은 CSS 그리드 레이아웃에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!