CSS 그리드 레이아웃 도입-CSS 튜토리얼-php.cn

속성을 사용하여 그리드의 열과 행의 숫자와 크기를 정의 할 수 있습니다.

CSS 그리드 레이아웃의

키워드를 사용하여 뷰포트의 크기에 따라 열과 행의 숫자와 크기를 자동으로 조정할 수 있습니다.

집

웹 프론트엔드

CSS 튜토리얼

CSS 그리드 레이아웃 도입

Christopher Nolan

Feb 21, 2025 am 09:35 AM

CSS 그리드 레이아웃 : 강력하고 유연한 웹 사이트 레이아웃을 구축하십시오

코어 포인트

CSS 그리드 레이아웃은 및

또는 별도의 그리드 시스템 스타일 시트와 같은 속성을 사용하지 않고 복잡한 웹 사이트 레이아웃을 만들 수있는보다 강력하고 유연한 방법을 제공합니다.

현재, IE 10 및 Edge는 CSS 그리드 레이아웃을 지원하지만 Chrome 및 Firefox의 특정 플래그를 통해 또는 Polyfill을 사용하여 활성화 할 수 있습니다.
CSS 그리드 레이아웃은 "FR"이라는 측정, 라인, 트랙, 셀 및 영역의 단위를 사용하여 웹 페이지의 요소 레이아웃을 정의합니다. inline CSS 그리드 레이아웃을 사용하면 마커와 레이아웃을 완전히 분리하여 CSS를 더 쉽게 유지 관리 할 수 있으며 디자인의 끝없는 가능성을 제공합니다. float

사진은 Sitepoint/Natalia Balska에서 나온 것입니다.
복잡한 웹 사이트를 만들 때 그리드가 중요합니다. 현대 웹 디자인에서 그리드의 중요성은 개발 속도를 높이기 위해 그리드 시스템을 구현하는 프레임 워크 수에서 볼 수 있습니다.
CSS 그리드 레이아웃 사양이 도입되면 그리드 시스템을 사용하기 위해 별도의 스타일 시트를 포함 할 필요가 없습니다. 또 다른 장점은 더 이상 웹 페이지에 요소를 배열하기 위해 및 와 같은 속성에 의존 할 필요가 없다는 것입니다. 이 튜토리얼에서는 그리드 시스템의 기본 사항을 다루고 기본 블로그 레이아웃을 생성합니다.
브라우저 지원
현재, IE 10 및 Edge 지원 그리드 레이아웃 만 - 아직 상용 사이트에서는 사용할 수 없습니다.
는 크롬에서 실험 웹 플랫폼 기능을 통해 크롬에서 활성화 될 수 있습니다.

플래그를 사용하여 Firefox에서 활성화 할 수 있습니다.

또 다른 옵션은 PolyFill을 사용하는 것입니다. CSS 그리드 폴리 필이 존재합니다! 위에서 언급 한 다양한 옵션을 사용하면 그리드 레이아웃 실험을 시작하고 아직 초기 단계에있을 때 가능한 한 많이 배울 수 있습니다. Introducing the CSS Grid Layout 참고 : Internet Explorer는 현재 이전 버전의 사양을 구현합니다. 불행히도 이것은 최신 사양과 완전히 호환되지 않음을 의미합니다. 이 튜토리얼의 예제를 연구 할 때는 해당 플래그를 활성화하여 Chrome 또는 Firefox를 사용하는 것이 좋습니다.

그리드 시스템 용어

요소를 배치하는 측면에서 CSS 그리드 시스템은 테이블과 유사합니다. 그러나 더 강력하고 유연합니다. 이 섹션에서는 그리드를 사용할 때 알아야 할 몇 가지 용어를 논의 할 것입니다. 단위 :이 장치는 사용 가능한 공간의 일부를 지정하는 데 사용됩니다.

및

와 함께 사용하도록 설계되었습니다. 사양에 따르면

분수 공간을 할당하는 분수 공간은 결국 "길이"또는 컨텐츠 기반 행 및 열 크기가 최대 값에 도달 한 후에 발생합니다. inline float 라인 : 선은 다른 요소의 경계를 정의합니다. 그들은 수직 및 수평으로 달려갑니다. 아래 그림에는 4 개의 수직선과 4 개의 수평선이 있습니다.

도로 : 트랙은 평행선 사이의 공간입니다. 아래 그림에는 세 개의 수직 트랙과 3 개의 수평 트랙이 있습니다.

셀 : 셀은 그리드의 기본 빌딩 블록입니다. 아래 그림에는 총 9 개의 셀이 있습니다.

영역 : 영역은 여러 세포가있는 직사각형 모양입니다. 따라서

트랙 는 이고 는 또한 입니다. 그리드의 위치 요소 기본부터 시작하겠습니다. 이 섹션에서는 그리드를 사용하여 특정 위치에 요소를 찾는 방법을 알려드립니다. CSS 그리드 레이아웃을 사용하려면 부모 요소와 하나 이상의 어린이가 필요합니다. 데모를 위해 다음 태그를 그리드 시스템으로 사용합니다. 태그를 완료 한 후 아래 그림과 같이 부모 요소에 또는 를 적용해야합니다.

및 Introducing the CSS Grid Layout 특성은 다양한 행과 열의 너비를 지정하는 데 사용됩니다. 위의 예에서는 5 개의 열을 정의했습니다.

열은 슬롯으로 작용하여 요소 사이에 필요한 간격을 제공합니다. 첫 번째 열의 너비는 200px입니다. 세 번째 열은 나머지 공간의 0.3 부분을 차지합니다. 마찬가지로, 다섯 번째 열은 나머지 공간의 0.7 부분을 차지합니다.

내부 컨텐츠를 기반으로 라인을 확장 할 수 있도록 의 첫 번째 줄에 를 사용하십시오. 행은 슬롯 역할을합니다.

이 시점에서 요소는 다음 데모와 같이 밀접하게 배열됩니다. (Codepen Demo 링크는 여기에서 생략됩니다)

요소 B가 슬롯으로 사용하려는 두 번째 열에 위치한다는 것을 관찰하십시오. 그리드 내의 자식 요소의 위치를 지정하지 않으면 브라우저는 첫 번째 행이 완전히 채워질 때까지 각 셀에 하나의 요소를 배치하고 나머지는 다음 행으로갑니다. 그렇기 때문에 두 번째 줄에 4 개의 여분의 열이 남아 있습니다.

그리드의 특정 셀로 요소를 이동하려면 CSS의 위치를 지정해야합니다. 그리드 시스템을 사용하여 요소를 이동하는 방법을 설명하기 전에 아래 이미지를 확인하십시오. (이미지 링크는 여기에서 생략됩니다)

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

로그인 후 복사

<,>이 경우 "라인 기반 배치"를 사용합니다. 라인 기반 배치는 그리드 시스템의 라인이 배치 및 제한 요소에 대한 안내서 역할을한다는 것을 의미합니다. 요소 B를 예로 들어 봅시다. 수평 방향으로 3 열에서 시작하여 4 열에서 끝납니다. 세로 축에서는 1 행과 라인 2 사이에 있습니다.

display: grid 우리는 display: inline-grid를 사용하여 요소의 시작 세로선을 지정합니다. 이 경우 3으로 설정됩니다. 는 요소의 최종 수직선을 나타냅니다. 이 경우이 속성은 4와 같습니다. 해당 행 값도 유사하게 설정됩니다.

위의 모든 것을 고려하여 요소 B를 두 번째 셀로 이동하려면 다음 CSS를 사용합니다.

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

로그인 후 복사

마찬가지로, 요소 F를 여섯 번째 셀로 이동하려면 다음 CSS를 사용합니다.

CSS를 변경 한 후이 데모에서와 같이 요소를 올바르게 간격해야합니다. (Codepen Demo 링크는 여기에서 생략됩니다)

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

로그인 후 복사

<<> 기본 레이아웃을 만듭니다

기본 블로그 레이아웃을 만들 시간입니다. 블로그에는 실제 콘텐츠에 대한 헤더, 바닥 글, 사이드 바 및 두 섹션이 있습니다. 마커부터 시작합시다 :

태그의 요소 순서는 웹 페이지의 요소 위치에 영향을 미치지 않습니다. CSS를 변경하지 않는 한 태그의 헤더 위에 바닥 글을 넣을 수 있으며 웹 페이지의 요소 위치가 변경되지 않습니다. 물론, 나는 이것을 추천하지 않습니다. 요점은 - 마커는 더 이상 요소의 위치를 결정하지 않습니다. 우리가 지금해야 할 일은

및 다양한 요소의 다른 속성의 값을 결정하는 것입니다. 마지막 예제와 마찬가지로 그리드 그래프를 사용하여 모든 그리드 속성의 값을 결정합니다. (이미지 링크는 여기에서 생략됩니다)

위의 그림과 같이, 헤더는 열 1에서 4 열로, 1 행에서 2 행으로 이동합니다. 이것은 다음과 같이 보일 것입니다 : <🎜 🎜>

< "> 마찬가지로,"추가 "는 열 3에서 4 열로, 5 행에서 6 행으로 간다. CSS는 다음과 같습니다

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

로그인 후 복사

다른 모든 요소의 그리드 특성을 쉽게 결정할 수 있습니다. Codepen 데모를 확인하고 다양한 그리드 값을 실험하여 라인 기반 배치를 더 잘 이해하십시오. (Codepen Demo 링크는 여기에서 생략됩니다)

<🎜 🎜> <<> 결론

CSS 그리드 레이아웃 사양을 통해 복잡한 레이아웃을 쉽게 만들 수 있습니다. 우리가 작성 해야하는 CS는 더 간단하고 유지 관리가 쉽습니다. 디자인에서 복잡한 레이아웃을 만들 때 더 이상 grid-row-end 또는 다른 속성을 사용할 필요가 없습니다. 또 다른 큰 장점은 마킹 및 레이아웃의 완전한 분리입니다. CSS 그리드 레이아웃의 경우 가능성은 끝이 없습니다.

이 튜토리얼에 대해 궁금한 점이 있으면 의견에 알려주십시오.

CSS 그리드 레이아웃에 대한 FAQS

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

로그인 후 복사

CSS 그리드 레이아웃은 다른 CSS 레이아웃 방법과 어떻게 다릅니 까?

CSS 그리드 레이아웃은 1 차원 인 Flexbox와 같은 다른 CSS 레이아웃 방법과 다른 2 차원 레이아웃 시스템입니다. 즉, CSS 그리드를 사용하면 다른 방법이 수행 할 수없는 수평 및 수직 레이아웃을 모두 제어 할 수 있습니다. 더 복잡한 디자인과 큰 레이아웃을 처리하도록 설계되었습니다. 또한보다 유연하고 강력하여보다 창의적이고 더 미세한 디자인이 가능합니다.

CSS 그리드 레이아웃을 시작하는 방법은 무엇입니까?

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

로그인 후 복사

CSS 그리드 레이아웃 사용을 시작하려면 요소의

속성을 또는 로 설정해야합니다. 이것은 요소를 그리드 컨테이너로 만들고 자식 요소는 그리드 항목입니다. 그런 다음 다양한 메쉬 속성을 사용하여 메쉬의 레이아웃과 메쉬 항목의 위치를 정의 할 수 있습니다.

다른 CSS 레이아웃 방법과 함께 CSS 그리드 레이아웃을 사용할 수 있습니까?

예, CSS 그리드 레이아웃은 다른 CSS 레이아웃 방법과 함께 사용할 수 있습니다. 예를 들어, 웹 사이트의 구성 요소에 Flexbox를 사용할 수 있으며 전체 레이아웃에는 CSS 그리드를 사용할 수 있습니다. 이를 통해 각 레이아웃 방식을 활용할 수 있습니다.

CSS 그리드 레이아웃을 사용하여 그리드를 만드는 방법은 무엇입니까?

CSS 그리드 레이아웃을 사용하여 그리드를 만들려면 먼저 요소의 속성을

또는 로 설정하여 그리드 컨테이너를 정의해야합니다. 그런 다음 및

속성을 사용하여 그리드의 열과 행의 숫자와 크기를 정의 할 수 있습니다.

그리드에 항목을 배치하는 방법은 무엇입니까?

당신은 display 및 속성을 사용하여 그리드에 항목을 배치 할 수 있습니다. 이 속성을 사용하면 프로젝트의 시작 및 끝 라인을 지정하여 그리드의 특정 셀 또는 셀에 효과적으로 배치 할 수 있습니다. grid 그리드 라인과 그리드 트랙이란 무엇입니까? inline-grid CSS 그리드 레이아웃에서 그리드 라인은 그리드 구조를 구성하는 분배기입니다. 숫자는 1에서 시작하고 줄 번호는 위에서 왼쪽에서 오른쪽에서 오른쪽으로 증가합니다. 그리드 트랙은 두 개의 인접한 그리드 라인 사이의 공간으로, 열이나 행이 될 수 있습니다. grid-template-columns CSS 그리드 레이아웃의 grid-template-rows 장치는 무엇입니까?