CSS3 그리드 레이아웃에 대한 10분 가이드

소개

CSS3 그리드 레이아웃은 행과 열로 레이아웃을 제어하는 ​​데 적합합니다!

레이아웃의 구조를 만듭니다(예: 행과 열의 수)

레이아웃에 항목을 배치합니다(수동 또는 자동 배치를 통해)

위조하다

시작하기

그리드에 항목 배치: "display:grid"

## 그리드 열과 행 설정:

 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;

메모
1.Grid-template-columns 및 rows는 2차원 그리드의 2개 라인 사이의 공간인 그리드 트랙을 정의하는 데 도움이 됩니다.

2.Fr: fr은 분수를 나타내는 새로운 단위입니다. 따라서 각 열에 사용 가능한 공간의 1/4 부분을 사용하고 있습니다.

자동 그리드 행/열 설정

grid-template-col/row를 사용하여 원하는 열과 행 수를 명시적으로 명시하거나 auto와 함께 암시적 행/열 수를 사용할 수 있습니다.

/* create as many rows as needed that are 100px in height*/
 grid-auto-rows: 100px;

최소 최대 함수

이것은 2개의 매개변수를 취하는 내장 함수입니다. 첫 번째는 최소 'px'를 지정할 수 있도록 하고 두 번째는 최대값(예: auto의 최대값)을 지정할 수 있습니다. 예를 들어:

  grid-auto-rows: minmax(100px, auto);

포지셔닝 아이템

그리드에 항목을 배치할 때 트랙 대신 선을 대상으로 합니다.

grid-column-start, grid-column-end, grid-row-start and grid-row-end 

그리드 영역

그리드 셀이 여러 열 또는 행에 걸쳐 있을 때 그리드 영역이라고 합니다.

그리드 거터

기본 그리드 컨테이너에서 사용되는 grid-column-gap 및 grid-row-gap을 사용하여 열과 행 사이에 공간을 만들 수 있습니다. 예를 들면 다음과 같습니다.

.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(50,auto);
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}

중첩 그리드

예, 기본 컨테이너의 그리드 요소 내부에 그리드를 중첩할 수 있습니다. 단순 설정 display:grid 및 열 및 행 수를 지정합니다. 예를 들어:

콘텐츠 정렬

justify-items: 가운데를 사용하여 행을 따라 요소 정렬

align-items를 사용하여 열의 요소 정렬: 가운데

내용을 정렬하려면 text-align:center를 사용하십시오.