CSS 그리드 레이아웃에 대한 초보자 가이드-CSS 튜토리얼-php.cn

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

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

집

웹 프론트엔드

CSS 튜토리얼

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

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 pm 01:19 PM

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

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

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

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

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

그리드를 시작하는 것은 이것을하는 것만 큼 간단합니다.

. 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 사이에