CSS 그리드 레이아웃을 사용하여 요소를 배치 할 수있는 7 가지 방법

CSS 그리드를 사용하여 웹 요소를 레이아웃하는 7 가지 방법

(이 기사는 2017 년 3 월 23 일에 업데이트되었습니다. 특정 컨텐츠 : CSS 그리드 레이아웃에 대한 브라우저 지원) 이 기사에서는 그리드 레이아웃 모듈을 사용하여 웹 페이지에 요소를 배치하는 7 가지 방법을 소개합니다.

SitePoint는 이전에 "CSS 그리드 레이아웃 소개"를 발표했습니다. 최근에 나는 또한 "CSS 그리드 레이아웃의 초안 작업의 현재 상황"을 썼습니다. 여기에서는 CSS 그리드를 사용하여 웹 페이지의 레이아웃 요소를 레이아웃하는 특정 방법에 중점을 둡니다. 이제 하나씩 소개합시다.

키 포인트

CSS 그리드 레이아웃은 단일 속성, 및

, , , 와 같은 여러 메소드를 사용하여 웹 페이지에 요소를 배치 할 수있는 유연성을 허용합니다. 🎜> 키워드의 이름 라인 및 이름의 그리드 영역.

속성을 ​​통해 요소의 왼쪽 상단 및 하단 오른쪽 모서리를 지정할 수있는 반면

키워드를 사용하여 요소가 표시되는 열 또는 행의 수를 설정할 수 있습니다.

이름 라인은 복잡한 레이아웃을 구성하는 데 도움이되며 각 라인은 포함 할 내용 유형에 따라 이름을 할당합니다. 이 프로세스는 특정 섹션의 모든 그리드 라인에 공통 이름을 사용하고

키워드와 함께 요소가 사용하는이 선의 수를 지정하여 더 단순화 할 수 있습니다.

이름 그리드 영역은 라인이 아닌 다른 영역에 이름을 할당하여 요소 할당을 간단하고 간단하게 만듭니다. 그러나 이름 지정된 메쉬 영역은 현재 만 사각형 일 수 있습니다. CSS 그리드 레이아웃에 대한 브라우저 지원

현재, 그리드 레이아웃에는 일관된 브라우저 지원이 없습니다. 그러나 2017 년 3 월 현재 Chrome 및 Firefox 브라우저의 최신 버전은 기본적으로 CSS 그리드 레이아웃을 지원했습니다. IE는 여전히 오래된 구현을 지원하고 Opera는 실험 웹 플랫폼 플래그를 활성화해야하며 Safari는 전혀 지원하지 않습니다. 이 기사의 모든 예제를 올바르게 사용하려면 Chrome 또는 Firefox를 사용하는 것이 좋습니다. 어떤 이유로 이러한 브라우저에 문제가있는 독자의 경우 각 기술의 최종 결과를 보여주기 위해 스크린 샷을 추가했습니다.

메소드 1 : 단일 속성을 사용하여 모든 내용을 지정하십시오 grid-row grid-column 이것은 이전 기사에 요소를 배치하는 데 사용한 버전입니다. 이 방법은 길지만 이해하기 쉽습니다. 기본적으로 grid-area 및 /span 속성을 ​​사용하여 요소의 왼쪽 및 상단 및 하부 경계를 지정하십시오. 요소가 하나의 행이나 열만 있으면 -end 속성을 생략 할 수 있으므로 CSS를 적게 쓸 수 있습니다. span 다음 시연에서 요소 A는 다음 CSS를 사용하여 두 번째 행 및 두 번째 열에 배치되었습니다.

다음 방법을 사용하여 동일한 효과를 달성 할 수 있습니다.

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Codepen Demo Link

메소드 2 : 및

를 사용하십시오 첫 번째 예제의 CSS는 읽을 수 있고 이해하기 쉽지만 단일 요소를 배치하려면 네 가지 속성을 사용해야합니다. 우리는 4 개의 속성 대신 두 가지 속성 (

및 ) 만 사용할 수 있습니다. 두 속성 모두 슬래시로 분리 된 두 값을 가져옵니다. 여기서 첫 번째 값은 요소의 출발 선을 결정하고 두 번째 값은 요소의 끝 라인을 결정합니다. grid-row 다음은이 속성을 사용해야하는 구문입니다. grid-column 그리드의 오른쪽 하단에 항목 C를 배치하려면 다음 CSS를 사용할 수 있습니다. Codepen Demo Link

메소드 3 : 사용 grid-column 기술적으로, 우리가 배치하고있는 프로젝트는 웹 페이지의 특정 영역을 차지합니다. 이 항목의 경계는 그리드 라인에 제공하는 값에 의해 결정됩니다. 이 모든 값은 grid-row 속성을 ​​사용하여 한 번에 제공 할 수 있습니다.

다음은이 속성을 사용할 때 CSS의 출현입니다 :

이 값의 올바른 순서를 기억하는 데 어려움이 있다면 먼저 왼쪽 상단 코너 ( - ) 코너를 지정한 다음 오른쪽 하단 코너를 지정해야합니다 (

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

- ) 요소의 모서리.

이전 예제와 마찬가지로, 그리드의 오른쪽 하단에 항목 C를 배치하려면 다음 CSS를 사용할 수 있습니다. </previous></p> Codepen Demo Link <pre class='brush:php;toolbar:false;'>.selector { grid-row: row-start / row-end; grid-column: col-start / col-end; }

메소드 4 : 키워드 를 사용하십시오 요소를 배치 할 때는 엔드 라인을 지정하는 것 외에도

키워드를 사용하여 특정 요소가 걸리는 열 또는 행 수를 설정할 수도 있습니다.

다음은 키워드를 사용하기위한 올바른 구문입니다. grid-area 요소가 하나의 행이나 열만 있으면 키워드와 그 값을 생략 할 수 있습니다. 이번에는 그리드의 왼쪽 상단에 항목 C를 배치하겠습니다. 다음 CSS를 사용하여이를 수행 할 수 있습니다.

Codepen Demo Link grid-area 메소드 5 : 이름이 지정된 선

를 사용하십시오

지금까지 우리는 그리드 라인을 지정하기 위해 원시 숫자를 사용해 왔으며, 이는 간단한 레이아웃을 처리 할 때 사용하기 쉽습니다. 그러나 여러 요소를 배치해야 할 때 약간 지저분 할 수 있습니다. 대부분의 경우 페이지의 요소는 특정 범주에 속합니다. 예를 들어, 헤더는 열 선 C1에서 열 선 C2에서 및 행 라인 R1에서 행 라인 R2 까지일 수 있습니다. 모든 줄을 올바르게 지정 한 다음 요소를 숫자 대신 해당 이름으로 배치하는 것이 훨씬 쉽습니다. 개념을 명확하게하기 위해 매우 기본적인 레이아웃을 만들어 봅시다. 먼저 그리드 컨테이너에 적용되는 CSS를 수정해야합니다.

위에서 한 일은 포함 할 내용 유형에 따라 모든 줄에 이름을 할당하는 것입니다. 여기서 아이디어는 다른 요소의 위치를 ​​알려주는 이름을 사용하는 것입니다. 이 특정 예에서는 헤더 요소가 모든 열에 걸쳐 있습니다. 따라서 "Head-Col-Start"및 "Head-Col-End"라는 이름을 각각 첫 번째 및 마지막 열 선에 할당하면 이러한 선이 헤더의 왼쪽 및 오른쪽 끝을 나타냅니다. 다른 모든 라인은 비슷한 방식으로 명명 될 수 있습니다. 모든 줄이 이름 지어지면 다음 CSS를 사용하여 모든 요소를 ​​배치 할 수 있습니다.

우리는 평소보다 더 많은 CS를 작성해야하지만 이제 CSS를 보면서 요소의 위치를 ​​이해할 수 있습니다.

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Codepen Demo Link

메소드 6 : 공통 이름과

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

키워드 가있는 명명 선을 사용하십시오.

이전 방법에서 모든 선은 다른 이름을 가지며 요소의 시작점, 중간 점 또는 종점을 표시합니다. 예를 들어, "Content-Col-Start"및 "Content-Col-Mid"는 웹 페이지의 컨텐츠 부분의 시작점과 중간 점을 표시합니다. 콘텐츠가 부분적으로 더 많은 행을 다루면 "Content-Col-Mid-One", "Content-Col-Mid-Two"등과 같은 다른 행 이름을 제시해야합니다.

이 경우 "Content"와 같은 컨텐츠 부분의 모든 그리드 라인에 대해 하나의 공통 이름 만 사용한 다음 키워드를 사용하여 요소가 스파하는이 라인의 수를 지정할 수 있습니다. 또한 행 이름 옆에있는 숫자를 언급하여 요소에 걸쳐있는 행 또는 열 수를 설정할 수 있습니다.

이 방법을 사용하여 CSS는 다음과 같습니다 마지막 방법과 마찬가지로이 방법은 그리드 컨테이너의 CSS를 수정해야합니다.

각각의 이름의 열 선은 너비 (픽셀)를 나타내는 동일한 이름을 가지며, 각각의 명명 된 행 선은 특정 웹 페이지 섹션으로 덮인 행을 나타냅니다. 이 데모에서는 사이드 바 아래에 광고 섹션을 소개했습니다. 이것은 CSS입니다 :

Codepen Demo Link span

메소드 7 : 명명 된 그리드 영역을 사용하십시오

라인을 사용하는 대신 다른 영역에 이름을 할당하여 요소를 배치 할 수 있습니다. 다시, 우리는 그리드 컨테이너의 CSS를 약간 변경해야합니다.

그리드 컨테이너의 CSS는 이제 다음과 같아야합니다. 단일 도트 (.) 또는 일련의 도트는 아무것도없이 빈 셀을 만듭니다. 모든 문자열에는 같은 수의 열이 있어야합니다. 그렇기 때문에 우리는 포인트를 완전히 비워 두는 대신 포인트를 추가해야합니다. 현재 이름이 지정된 메쉬 영역은 직사각형 일 수 있습니다. 그러나 이것은 향후 버전의 사양에서 변경 될 수 있습니다. 모든 요소에 대한 CSS를 살펴 보겠습니다.

모든 그리드 영역을 정의한 후 다양한 요소에 할당하는 것은 매우 간단합니다. 영역에 이름을 할당 할 때 특수 문자를 사용할 수 없습니다. 그렇게하면 선언이 무효화됩니다.

Codepen Demo Link

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

결론

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

그게 다야! CSS 메쉬 레이아웃을 레이아웃 요소에 사용하는 7 가지 방법을 다루었습니다. 이 기사에 대한 팁을 다른 독자들과 공유하고 싶습니까? 자신의 프로젝트에서 어떤 방법을 선호합니까? 의견에 알려주십시오.

CSS 그리드 레이아웃 FAQ

CSS 그리드 레이아웃과 Flexbox의 차이점은 무엇입니까? CSS 그리드 레이아웃과 Flexbox는 모두 CSS의 강력한 레이아웃 시스템입니다. 비슷해 보이지만 다른 유형의 레이아웃 작업을 위해 설계되었습니다. Flexbox는 한 번에 한 번의 차원에서 행 또는 열을 레이아웃하도록 설계된 1 차원 레이아웃 모델입니다. 반면 CSS 그리드 레이아웃은 2 차원 시스템으로 열과 행을 모두 처리 할 수 ​​있으므로 복잡한 웹 레이아웃을 설계하기에 이상적인 선택입니다. CSS 그리드를 사용하여 반응 형 레이아웃을 만드는 방법은 무엇입니까?

CSS 그리드는 반응 형 레이아웃을 매우 간단하게 만듭니다. 그리드 컨테이너의 사용 가능한 공간의 일부를 나타내는 "FR"장치를 사용할 수 있습니다. 이 장치를 사용하면 뷰포트 크기에 따라 크기가 조정 된 유연한 그리드 트랙을 만들 수 있습니다. 또한 미디어 쿼리를 사용하여 다른 뷰포트 크기로 그리드 레이아웃을 변경하여 반응 형 디자인을 더 잘 제어 할 수 있습니다.

CSS 그리드 및 Flexbox를 동시에 사용할 수 있습니까? 예, CSS 그리드 및 Flexbox는 레이아웃에 함께 사용할 수 있습니다. 그들은 서로를 잘 보완합니다. 예를 들어 CSS 그리드를 사용하여 전체 페이지 구조를 레이아웃 한 다음 Flexbox를 사용하여 그리드 영역 내의 개별 구성 요소 또는 부품을 레이아웃 할 수 있습니다. CSS 그리드에서 항목을 정렬하는 방법은 무엇입니까?

CSS Grid는 "정당한 항목", "Align-Items", "Justify-Self"및 "Align-Self"를 포함하여 항목을 정렬하기위한 속성을 제공합니다. 이 속성은 그리드 항목이 행 및 열 축을 따라 정렬되는 방법을 제어합니다. 항목을 시작, 끝, 중앙 또는 스트레칭하여 그리드 영역을 채울 수 있습니다.

CSS 그리드 레이아웃의 그리드 라인이란 무엇입니까?

CSS 그리드 레이아웃에서 그리드 라인은 그리드 구조를 구성하는 분배기입니다. 수평 또는 수직 일 수 있으며 1부터 시작하여 번호가 매겨 질 수 있습니다. 두 줄 사이에 그리드 항목을 배치 할 수 있으므로 레이아웃 설계에 많은 유연성이 있습니다.

그리드 프로젝트간에 갭을 만드는 방법은 무엇입니까?

CSS 그리드는 그리드 품목간에 공백을 만드는 데 사용할 수있는 "갭"속성 (이전 "Grid-Gap")을 제공합니다. 이 속성은 행과 열 사이의 간격의 크기를 지정하여 하나 또는 두 값을 취할 수 있습니다.

CSS 그리드의"Grid-Template-Areas "속성이란 무엇입니까?

CSS 그리드의 "그리드-테일 플레이트-영역"속성을 사용하면 이름이 지정된 그리드 영역을 참조하여 그리드 레이아웃을 만들 수 있습니다. 그리드 프로젝트의 "그리드 지역"속성을 사용하여 이러한 영역을 정의한 다음 "Grid-Template-Areas"속성을 사용하여 CSS 코드에 시각적으로 배열 할 수 있습니다.

CSS 그리드에서 그리드 항목을 겹치는 방법은 무엇입니까?

CSS 그리드에서는 그리드 품목을 동일한 그리드 셀에 배치하거나 여러 셀을 덮는 그리드 영역을 지정하여 그리드 품목을 쉽게 겹치게 할 수 있습니다. 이것은 그리드 프로젝트의 "그리드-컬럼"및 "그리드 로우"속성으로 수행 할 수 있습니다.

CSS 그리드의"FR "장치는 무엇입니까?

CSS 그리드의 "FR"장치는 "Fraction"을 나타냅니다. 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다. 이 장치를 사용하면 사용 가능한 공간에 크기가 조정 된 유연한 그리드 트랙을 만들 수 있으므로 반응 형 레이아웃을보다 쉽게 ​​만들 수 있습니다.

CSS 그리드가 최신 브라우저에서 널리 지원됩니까?

예, CSS 그리드는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 브라우저에서 널리 지원됩니다. 그러나 인터넷 익스플로러에서는 지원되지 않습니다. IE를 지원 해야하는 경우 Flexbox 또는 플로팅 기반 레이아웃과 같은 대체 레이아웃 방법을 사용할 수 있습니다.

이미지 형식을

로 유지하고 원래 링크를 유지했습니다. Codepen에 직접 액세스 할 수 없으므로 Codepen 링크를 자리 표시 자로 교체했습니다. 이 자리 표시자를 실제 코피 펜 링크로 교체해야합니다.

위 내용은 CSS 그리드 레이아웃을 사용하여 요소를 배치 할 수있는 7 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!