CSS 그리드로 레이아웃 생성

CSS 그리드 : 현대 웹 디자인을위한 강력한 레이아웃 도구 Tiffany의 CSS Master, 2nd Edition 에서 발췌 한이 발췌는 2017 년 10 월에 도입 된 혁신적인 레이아웃 시스템 인 CSS Grid에 대한 간결한 소개를 제공합니다. 그리드는 이전에 광대 한 도구 조작이 필요한 복잡한 레이아웃의 생성을 단순화합니다. 사양이 상세하지만이 개요는 핵심 개념을 다루며 심층 학습을위한 추가 리소스를 가리 킵니다.

주요 개념 :

CSS 그리드는 이전에 도전하거나 달성하기가 불가능한 복잡한 레이아웃의 생성을 가능하게합니다. 2017 년 10 월에 광범위한 브라우저 지원을 받았습니다

요소에 를 적용하면 그리드 서식 컨텍스트를 설정하여 요소를 블록 레벨 컨테이너로 변환하고 어린이를 행과 열로 배열 된 그리드 항목으로 변환합니다.

및 속성은 공간 분리 된 트랙 목록을 사용하여 행과 열의 숫자와 크기를 정의합니다 (예 : 길이, 백분율, , ). 암시 적 그리드는 명시 적으로 정의 된 셀을 초과하는 그리드 항목을 자동으로 처리하여 컨텐츠에 따라 자동 크기를 기본으로합니다. 속기는 행과 열 정의를 결합합니다. 함수는 반복 열이나 행을 단순화하는 반면 및

는 열/행 카운트를 동적으로 조정합니다.
그리드 서식 컨텍스트 :
• 이러한 효과와 함께 그리드 서식 컨텍스트를 트리거합니다 display: grid 요소는 블록 레벨 요소가됩니다 하위 요소 (또는 텍스트 노드)는 블록과 같은 그리드 항목이됩니다 수평 쓰기 모드에서, 행 높이는 명시 적으로 설정되지 않는 한 가장 높은 품목과 일치합니다. 수직 쓰기 모드는 가장 긴 항목의 길이를 사용합니다
• grid-template-rows 도 비슷하게 동작되지만 컨테이너는 인라인 레벨로 유지됩니다 grid-template-columns 그리드 레이아웃 정의 : 그리드 컨테이너를 정의한 후 및 를 사용하여 행 및 열 수를 지정하십시오. 이들은 각 행 또는 열 위치에 대한 그리드 라인 이름과 크기를 정의하는 공간 구분 문자열 인 auto 트랙 목록 min-content를 허용합니다. max-content 명시 적 대 암시 적 그리드 :

  an 명시 적 그리드 는 모든 셀을 정의합니다. AN 암시 적 그리드 는 명시 적으로 정의 된 셀 이외의 추가 항목을 수용하도록 그리드를 확장합니다. 암시 적 그리드 품목 자동 크기, 콘텐츠에 맞게 확장하거나 나머지 공간을 채우십시오. 암시 적 그리드 항목의 경우 및 grid-auto-rows 기본 크기 제어 기본 크기이지만 grid-auto-columns를 사용하면 콘텐츠 오버플로가 방지됩니다. minmax()

  플렉스 유닛이있는 유연한 그리드 () : 플렉스 유닛 () 는 사용 가능한 공간의 분수를 나타내며 비례 적 크기를 제공합니다. 그것들은 절대 길이가 아닌 비율이며 다른 길이 단위 또는

  . 와 호환되지 않습니다.

  fr 속기 :

  속성은 간결함을 위해

  와 를 결합합니다 반복 행과 열 () : fr

  함수는 반복 패턴 생성을 단순화합니다. calc()는 사용 가능한 공간에 따라 반복 수를 동적으로 조정합니다. 트랙 크기 조정; 익명 트랙을 추가합니다

  

  추가 학습 :

  이것은 기본 소개입니다. CSS 그리드 사양 자체, Rachel Andrew의 그리드, 예 , Jen Simmons의 실험 레이아웃 실험실 및 레이아웃 YouTube 채널 및 CSS- 트릭의 "그리드에 대한 전체 안내서를 포함하여 수많은 리소스가 더 자세한 정보를 제공합니다. " 결론 :

  CSS 그리드는 강력한 도구입니다. 이 개요는 기능을 추가로 탐색하기위한 기초를 제공합니다.

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