기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS 그리드 그리드 레이아웃 튜토리얼

I. 개요

그리드 레이아웃(Grid)은 가장 강력한 CSS 레이아웃 솔루션입니다.

웹 페이지를 그리드로 나누고, 서로 다른 그리드를 임의로 결합하여 다양한 레이아웃을 만들 수 있습니다. 과거에는 복잡한 CSS 프레임워크를 통해서만 얻을 수 있었던 효과가 이제는 브라우저에 내장되어 있습니다.

위 그림과 같은 레이아웃은 그리드 레이아웃의 특징입니다.

그리드 레이아웃은 Flex 레이아웃과 어느 정도 유사합니다. 둘 다 컨테이너 내부의 여러 항목 위치를 지정할 수 있습니다. 그러나 중요한 차이점이 있습니다.

Flex 레이아웃은 축 레이아웃이며 축에 대한 "항목"의 위치만 지정할 수 있습니다.1차원 레이아웃 . 그리드 레이아웃은 컨테이너를 "행"과 "열"로 나누어 셀을 생성한 후 "항목이 위치한" 셀을 지정하는 것으로 간주할 수 있습니다.2D 레이아웃 . 그리드 레이아웃은 Flex 레이아웃보다 훨씬 강력합니다.

2. 기본 개념

그리드 레이아웃을 배우기 전에 몇 가지 기본 개념을 이해해야 합니다.

2.1 컨테이너와 프로젝트

그리드 레이아웃이 있는 영역을 "컨테이너"라고 합니다. 컨테이너 내부에서 그리드 위치 지정을 사용하는 하위 요소를 "항목"이라고 합니다.

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

위 코드에서 가장 바깥쪽에 있는<div>요소는 컨테이너이고 세 개의 내부 요소는<div>요소는 항목입니다.

알아채다: 프로젝트는 컨테이너의 최상위 하위 요소만 될 수 있으며 위 코드와 같은 프로젝트의 하위 요소는 포함되지 않습니다.<p> 요소는 항목이 아닙니다. 그리드 레이아웃은 프로젝트에만 적용됩니다.

2.2 행과 열

컨테이너 내부의 가로 영역을 '행', 세로 영역을 '열'이라고 합니다.

위 그림에서 가로로 어두운 부분이 '행'이고, 세로로 어두운 부분이 '열'입니다.

2.3 세포

행과 열이 교차하는 영역을 '셀'이라고 합니다.

정상적인 상황에서,n좋아 그리고m열이 생성됩니다n x m 세포. 예를 들어 행 3개와 열 3개가 있으면 9개의 셀이 생성됩니다.

2.4 그리드 라인

그리드를 나누는 선을 "그리드선"이라고 합니다. 가로 그리드 선은 행을 나누고, 세로 그리드 선은 열을 나눕니다.

정상적인 상황에서,n좋아요n + 1루트 수평 그리드 선,m상장됨m + 1세 개의 수직 그리드 선이 있습니다. 예를 들어 세 행에 네 개의 수평 그리드 선이 있습니다.

위 사진은 가로 그리드 5개, 세로 그리드 5개가 총 5개 있는 4 x 4 그리드 입니다.

3. 컨테이너 속성

그리드 레이아웃의 속성은 두 가지 범주로 나뉩니다. 한 유형은 컨테이너에 정의되어 컨테이너 속성이라고 하며, 다른 유형은 프로젝트에 정의되어 프로젝트 속성이라고 합니다. 이 부분에서는 먼저 컨테이너 속성을 소개합니다.

3.1 표시 속성

display: grid그리드 레이아웃을 사용할 컨테이너를 지정합니다.

div {
  display: grid;
}
1
2
3

위 사진은display: grid~의효과。

기본적으로 컨테이너 요소는 블록 수준 요소이지만 인라인 요소로 설정할 수도 있습니다.

div {
  display: inline-grid;
}
1
2
3

위의 코드는 다음을 지정합니다.div내부적으로 그리드 레이아웃을 사용하는 인라인 요소입니다.

위 사진은display: inline-grid~의효과。

그리드 레이아웃으로 설정한 후에는 컨테이너 하위 요소(항목)가float、display: inline-block、display: table-cell、vertical-align그리고column-*다른 모든 설정은 유효하지 않습니다.

3.2 그리드-템플릿-열 속성, 그리드-템플릿-행 속성

컨테이너는 그리드 레이아웃을 지정한 후 행과 열을 나누어야 합니다.grid-template-columns속성은 각 열의 열 너비를 정의합니다.grid-template-rows속성은 각 행의 행 높이를 정의합니다.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

위의 코드세 개의 행과 세 개의 열이 있는 그리드를 지정합니다. 열 너비와 행 높이가 모두 있습니다.100px。

절대 단위를 사용하는 대신 백분율을 사용할 수도 있습니다.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）반복()

때로는 같은 값을 반복해서 쓰는 것이 매우 번거로운 경우가 있는데, 특히 그리드가 많은 경우에는 더욱 그렇습니다.이때 다음을 사용할 수 있습니다.repeat() 반복되는 값을 단순화하는 함수입니다.위의 코드는repeat()다음과 같이 다시 작성되었습니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 반복 횟수(위 예에서는 3)이고 두 번째 매개변수는 반복할 값입니다.

repeat()패턴을 반복해도 괜찮습니다.

grid-template-columns: repeat(2, 100px 20px 80px);
1

위의 코드6개의 열이 정의되어 있으며 첫 번째와 네 번째 열의 너비는 다음과 같습니다.100px, 두 번째 및 다섯 번째 열20px, 세 번째 열과 여섯 번째 열80px。

(2) 자동완성 키워드

경우에 따라 셀 크기는 고정되어 있지만 컨테이너 크기는 정의되지 않습니다.각 행(또는 열)에 가능한 한 많은 셀을 수용하려면 다음을 사용할 수 있습니다.auto-fill키워드는 자동 완성을 나타냅니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

위의 코드각 열의 너비를 나타냅니다.100px, 컨테이너에 더 이상 열을 담을 수 없을 때까지 자동으로 채워집니다.

와는 별개로auto-fill및 키워드auto-fit , 둘 다의 동작은 기본적으로 동일합니다.컨테이너가 한 행의 모든 ​​셀을 수용할 수 있을 만큼 충분히 넓고 셀 너비가 고정되지 않은 경우에만행동 차이：auto-fill나머지 너비는 빈 셀로 채워집니다.auto-fit셀 너비를 확장하려고 합니다.

(3) fr 키워드

비례 관계를 편리하게 표현할 수 있도록 그리드 레이아웃을 제공합니다.fr 키워드(분수를 줄여서 "조각"을 의미함).두 열의 너비가 다음과 같은 경우1fr그리고2fr, 이는 후자가 전자의 두 배라는 것을 의미합니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

위의 코드너비가 같은 두 열을 나타냅니다.

fr절대 길이 단위와 함께 사용할 수 있어 매우 편리합니다.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

위의 코드이는 첫 번째 열의 너비가 150픽셀이고 두 번째 열의 너비가 세 번째 열의 절반이라는 의미입니다.

（4）최소최대값()

minmax() 이 함수는 길이 범위를 생성하여 길이가 이 범위 내에 있음을 나타냅니다. 최소값과 최대값이라는 두 개의 매개변수를 허용합니다.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

위의 코드에서,minmax(100px, 1fr)열 너비가 다음보다 작지 않음을 나타냅니다.100px,보다 크지 않음1fr。

(5)자동 키워드

auto키워드 표현 길이는 브라우저 자체에 의해 결정됩니다.

grid-template-columns: 100px auto 100px;
1

위 코드에서 두 번째 열의 너비는 셀 내용을 설정하지 않는 한 기본적으로 해당 열의 셀 최대 너비와 같습니다.min-width이며 이 값은 최대 너비보다 큽니다.

(6) 그리드선의 명칭

grid-template-columns속성과grid-template-rows속성에서 나중에 쉽게 참조할 수 있도록 대괄호를 사용하여 각 그리드 선의 이름을 지정할 수도 있습니다.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

위 코드에서는 3행 x 3열의 그리드 레이아웃을 지정하므로 수직 그리드선 4개, 수평 그리드선 4개가 있습니다. 대괄호 안에는 8개 줄의 이름이 있습니다.

그리드 레이아웃은 같은 줄에 대해 여러 이름을 허용합니다.[fifth-line row-5]。

(7) 레이아웃 예

grid-template-columns 속성은 웹 페이지 레이아웃에 매우 유용합니다. 2열 레이아웃에는 한 줄의 코드만 필요합니다.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

위 코드는 왼쪽 열을 70%, 오른쪽 열을 30%로 설정합니다.

전통적인 12개의 그리드 레이아웃도 작성하기 쉽습니다.

grid-template-columns: repeat(12, 1fr);
1

3.3 그리드-행-갭 속성, 그리드-열-갭 속성, 그리드-갭 속성

grid-row-gap행 사이의 간격(줄 간격)을 설정하는 속성입니다.grid-column-gap속성은 열 사이의 간격(열 간격)을 설정합니다.

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

위의 코드가운데,grid-row-gap줄 간격을 설정하는 데 사용됩니다.grid-column-gap열 간격을 설정하는 데 사용됩니다.

grid-gap속성은 다음과 같습니다grid-column-gap그리고grid-row-gap의 결합된 약어 형태, 구문은 다음과 같습니다.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

따라서 위의 CSS 코드는 다음 코드와 동일합니다.

.container {
  grid-gap: 20px 20px;
}
1
2
3

만약에grid-gap두 번째 값은 생략되고 브라우저는 두 번째 값을 첫 번째 값과 동일한 것으로 간주합니다.

최신 표준에 따르면 위의 세 가지 속성 이름은grid-접두어가 제거되었습니다.grid-column-gap그리고grid-row-gap다음과 같이 쓰여졌다column-gap그리고row-gap，grid-gap다음과 같이 쓰여졌다gap。

3.4 그리드-템플릿-영역 속성

그리드 레이아웃을 사용하면 단일 또는 다중 셀로 구성된 "영역"을 지정할 수 있습니다.grid-template-areas속성은 영역을 정의하는 데 사용됩니다.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

위 코드는 먼저 9개의 셀을 나눈 후 이름을 지정합니다.a도착하다i9개 영역은 각각 이 9개 셀에 해당합니다.

여러 개의 셀을 하나의 영역으로 병합하는 작성 방법은 다음과 같습니다.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

위 코드는 9개의 셀을 다음과 같이 나눕니다.a、b、c세 가지 영역.

아래는 예시 레이아웃입니다.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

위 코드에서 상단은 헤더 영역입니다.header, 하단은 바닥글 영역입니다.footer, 중간 부분은main그리고sidebar。

일부 영역을 활용할 필요가 없는 경우 "포인트"(.)표현하다.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

위 코드에서 가운데 ​​열은 점으로 되어 있는데, 이는 해당 셀이 사용되지 않거나 어떤 영역에도 속하지 않는다는 의미입니다.

영역 이름은 그리드 선에 영향을 미칩니다.각 영역의 시작 그리드 라인은 자동으로 이름이 지정됩니다.区域名-start, 종료된 그리드 선의 이름이 자동으로 지정됩니다.区域名-end。

예를 들어 지역 이름은 다음과 같습니다.header, 시작 위치의 수평 격자선과 수직 격자선을 호출합니다.header-start, 끝 위치의 수평 격자선과 수직 격자선을 호출합니다.header-end。

3.5 그리드 자동 흐름 속성

그리드가 분할되면 컨테이너의 하위 요소가 자동으로 각 그리드에 순서대로 배치됩니다. 기본 배치 순서는 "행 우선, 열 다음"입니다. 즉, 첫 번째 행을 먼저 채운 다음 두 번째 행 배치를 시작합니다. 이는 아래 그림의 숫자 순서입니다.

이 순서는 다음과 같습니다.grid-auto-flow속성에 따라 결정되는 기본값은 다음과 같습니다.row , 즉 "행 먼저, 그 다음 행"입니다.다음으로 설정할 수도 있습니다.column, "라인 먼저, 그 다음 행"이 됩니다.

grid-auto-flow: column;
1

위의 코드이미 설정됨column이제부터 배치 순서는 아래와 같습니다.

grid-auto-flow속성을 다음으로 설정하는 것 외에도row그리고column, 다음으로 설정할 수도 있습니다.row dense그리고column dense . 이 두 값은 주로 특정 항목에 위치가 할당된 후 나머지 항목을 자동으로 배치하는 데 사용됩니다.

아래 예프로젝트 1번과 프로젝트 2번이 각각 2개의 셀을 차지하도록 하고, 기본적으로grid-auto-flow: row이 경우 다음과 같은 레이아웃이 생성됩니다.

위 그림에서는 1번 항목 뒤의 위치가 비어 있습니다. 이는 3번 항목이 기본적으로 2번 항목을 따르기 때문에 2번 항목 뒤에 순위가 지정되기 때문입니다.

이제 설정을 수정하고 다음과 같이 설정하세요.row dense, "행 먼저, 열 다음"을 의미하며 공백 없이 최대한 꽉 채우십시오.

grid-auto-flow: row dense;
1

위의 코드효과는 다음과 같습니다.

위의 이미지는 첫 번째 행을 먼저 채운 다음 두 번째 행을 채우므로 항목 3이 항목 1을 따릅니다. 8번 항목과 9번 항목은 네 번째 행에 배치됩니다.

으로 설정을 변경하면column dense는 "열 먼저, 그 다음 행"을 의미하며 가능한 한 공백을 채우십시오.

grid-auto-flow: column dense;
1

위의 코드효과는 다음과 같습니다.

위 이미지는 첫 번째 열을 먼저 채운 다음 두 번째 열을 채웁니다. 따라서 항목 번호 3이 첫 번째 열에 있고 항목 번호 4가 두 번째 열에 있습니다. 항목 8과 9는 네 번째 열에 압축되었습니다.

3.6 justify-items 속성, align-items 속성, place-items 속성

justify-items속성은 셀 내용의 가로 위치(왼쪽, 가운데, 오른쪽)를 설정합니다.align-items속성은 셀 내용의 세로 위치(상단, 중앙, 하단)를 설정합니다.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

이 두 속성은 정확히 동일하게 작성되며 다음 값을 사용할 수 있습니다.

• 시작: 셀의 시작 가장자리를 정렬합니다.
• end: 셀의 끝 가장자리에 맞춰 정렬합니다.
• center: 셀 내부의 중앙.
• 늘이기: 셀의 전체 너비를 채우도록 늘입니다(기본값).

.container {
  justify-items: start;
}
1
2
3

위의 코드셀의 내용이 왼쪽으로 정렬됨을 나타내며, 효과는 아래와 같습니다.

.container {
  align-items: start;
}
1
2
3

위의 코드셀의 내용이 헤드 정렬되었음을 나타내며, 그 효과는 아래와 같습니다.

place-items속성은 다음과 같습니다align-items속성과justify-items속성의 결합된 단축 형식입니다.

place-items: <align-items> <justify-items>;
1

아래는 예시입니다.

place-items: start end;
1

두 번째 값이 생략되면 브라우저는 이를 첫 번째 값과 동일한 것으로 간주합니다.

3.7 justify-content 속성, align-content 속성, place-content 속성

justify-content속성은 컨테이너 내부 전체 콘텐츠 영역의 가로 위치(왼쪽, 가운데, 오른쪽)이며,align-content속성은 전체 콘텐츠 영역(상단, 중앙, 하단)의 수직 위치입니다.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

이 두 속성은 정확히 동일하게 작성되며 다음 값을 사용할 수 있습니다. (아래 사진은 모두 기준입니다.justify-content예를 들어 속성align-content 속성 다이어그램은 수평 방향이 수직 방향으로 변경된다는 점을 제외하면 완전히 동일합니다. )

• start - 정렬된 컨테이너의 시작 테두리입니다.
  
• end - 컨테이너의 끝 테두리를 정렬합니다.
  
• center - 컨테이너를 안쪽 중앙에 놓습니다.
  
• Stretch - 항목 크기가 지정되지 않은 경우 전체 그리드 컨테이너를 차지하도록 늘어납니다.
  
• space-around - 각 항목의 양쪽에 동일한 공간이 있습니다. 따라서 항목 사이의 공간은 항목과 컨테이너 테두리 사이의 공간의 두 배입니다.
  
• space-between - 항목 사이에 동일한 공간이 있고 항목과 컨테이너 테두리 사이에는 공간이 없습니다.
  
• space-evenly - 항목 사이의 간격이 같고, 항목과 컨테이너 테두리 사이의 간격이 같습니다.
  
  place-content속성은 다음과 같습니다align-content속성과justify-content속성의 결합된 단축 형식입니다.

place-content: <align-content> <justify-content>;
1

아래는 예시입니다.

place-content: space-around space-evenly;
1

두 번째 값을 생략하면 브라우저는 두 번째 값이 첫 번째 값과 같다고 가정합니다.

3.8 그리드-자동-열 속성, 그리드-자동-행 속성

경우에 따라 일부 항목은 기존 그리드 외부에 위치가 할당됩니다. 예를 들어 그리드에는 3개의 열만 있는데 5번째 행에 특정 항목이 지정되어 있습니다. 이때 브라우저는 항목 배치를 용이하게 하기 위해 추가 그리드를 자동으로 생성합니다.

grid-auto-columns속성과grid-auto-rows 속성은 브라우저에서 자동으로 생성되는 중복 그리드의 열 너비와 행 높이를 설정하는 데 사용됩니다.그들은 다음과 같은 방식으로 작성됩니다.grid-template-columns그리고grid-template-rows 정확히 동일합니다. 이 두 속성을 지정하지 않으면 브라우저는 전적으로 셀 내용의 크기에 따라 새 그리드의 열 너비와 행 높이를 결정합니다.

아래 예내부에는 분할된 그리드가 3행×3열인데, 4행에는 8번 항목이, 5행에는 9번 항목이 지정되어 있습니다.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

위 코드는 새 행 높이가 균일하게 50픽셀(원래 행 높이가 100픽셀)임을 지정합니다.

3.9 그리드 템플릿 속성, 그리드 속성

grid-template속성은 다음과 같습니다grid-template-columns、grid-template-rows그리고grid-template-areas이 세 가지 속성을 결합한 단축형입니다.

grid속성은 다음과 같습니다grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow이 6가지 속성을 결합한 약어입니다.

읽기 및 쓰기의 용이성 측면에서 속성을 병합하지 않는 것이 좋으므로 여기서는 두 속성에 대해 자세히 소개하지 않습니다.

4. 프로젝트 속성

프로젝트에는 다음 속성이 정의되어 있습니다.

4.1 그리드-열-시작 속성, 그리드-열-끝 속성, 그리드-행-시작 속성, 그리드-행-끝 속성

프로젝트의 위치를 ​​지정할 수 있습니다. 구체적인 방법은 프로젝트의 4개 경계와 각각 배치되는 그리드 선을 지정하는 것입니다.

• grid-column-start속성: 왼쪽 테두리가 위치한 수직 격자선
• grid-column-end속성: 오른쪽 테두리가 위치한 수직 그리드 라인
• grid-row-start속성: 위쪽 테두리가 위치한 수평 그리드 라인
• grid-row-end속성: 하단 테두리가 위치한 수평 그리드 라인

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

위의 코드항목 1의 왼쪽 테두리가 두 번째 수직 격자선이고 오른쪽 테두리가 네 번째 수직 격자선이 되도록 지정합니다.

위 그림에서는 1번 항목의 왼쪽, 오른쪽 테두리만 지정하고 위쪽, 아래쪽 테두리는 지정하지 않아 기본 위치를 사용하게 됩니다. 즉, 위쪽 테두리가 첫 번째 가로 그리드선이 되고, 아래쪽 테두리는 두 번째 수평 격자선입니다.

1번 항목을 제외한 나머지 항목은 위치가 지정되지 않고 브라우저에 의해 자동으로 배치됩니다. 이때 위치는 컨테이너에 따라 결정됩니다.grid-auto-flow속성에 따라 결정되며 이 속성의 기본값은 다음과 같습니다.row , 따라서 "행 먼저, 그 다음 열"로 정렬됩니다.독자는 이 속성의 값을 다음으로 변경할 수 있습니다.column、row dense그리고column dense를 클릭하여 다른 항목의 위치가 어떻게 변경되었는지 확인하세요.

아래 예4개의 테두리 위치를 지정하는 효과입니다.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

이 4가지 속성의 값은 그리드선 번호로 지정되는 것 외에도 그리드선 이름으로 지정될 수도 있습니다.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

위 코드에서는 왼쪽과 오른쪽 테두리의 위치를 ​​그리드 선의 이름으로 지정합니다.

이 네 가지 속성의 값도 사용할 수 있습니다.span"범위", 즉 왼쪽과 오른쪽 테두리(상단 및 하단 테두리) 사이에 걸쳐 있는 그리드 수를 나타내는 키워드입니다.

.item-1 {
  grid-column-start: span 2;
}
1
2
3

위의 코드항목 번호 1의 왼쪽 테두리가 오른쪽 테두리에서 2개의 그리드에 걸쳐 있음을 나타냅니다.

이는 다음과 관련이 있습니다.아래 코드효과는 똑같습니다.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

이 네 가지 속성을 사용하여 항목이 겹치는 경우z-index속성은 항목이 겹치는 순서를 지정합니다.

4.2 그리드-열 속성, 그리드-행 속성

grid-column속성은 다음과 같습니다grid-column-start그리고grid-column-end의 결합된 약어 형태grid-row속성은 다음과 같습니다grid-row-start속성과grid-row-end합병의 약식 형태.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

아래는 예시입니다.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

위 코드에서 프로젝트는item-1첫 번째 열 라인부터 세 번째 열 라인까지 첫 번째 행을 차지합니다.

이 두 속성 중에서 다음을 사용할 수도 있습니다.span확장할 그리드 수를 나타내는 키워드입니다.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

위의 코드에, 프로젝트item-1점유 면적은 첫 번째 행 + 두 번째 행, 첫 번째 열 + 두 번째 열로 구성됩니다.

슬래시와 다음 부분은 생략할 수 있으며 기본적으로 그리드에 걸쳐 있습니다.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

위 코드에서 프로젝트는item-1왼쪽 상단 모서리에 있는 첫 번째 그리드를 차지하세요.

4.3 그리드 영역 속성

grid-area속성은 항목이 배치되는 영역을 지정합니다.

.item-1 {
  grid-area: e;
}
1
2
3

위의 코드에서 프로젝트 번호 1은 다음 위치에 있습니다.e영역에서 효과는 아래와 같습니다.

grid-area속성은 다음과 같이 사용할 수도 있습니다.grid-row-start、grid-column-start、grid-row-end、grid-column-end병합된 약어 형식은 프로젝트의 위치를 ​​직접 지정합니다.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

아래는예。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 justify-self 속성, align-self 속성, place-self 속성

justify-self속성은 셀 내용의 가로 위치(왼쪽, 가운데, 오른쪽)를 설정합니다.justify-items속성은 정확히 동일하게 사용되지만 단일 항목에만 적용됩니다.

align-self속성은 셀 내용의 수직 위치(상단, 중앙, 하단)를 설정합니다.align-items속성의 사용법은 정확히 동일하며 단일 프로젝트에만 영향을 미칩니다.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

두 속성 모두 다음 네 가지 값을 사용할 수 있습니다.

• 시작: 셀의 시작 가장자리를 정렬합니다.
• end: 셀의 끝 가장자리에 맞춰 정렬합니다.
• center: 셀 내부의 중앙.
• 늘이기: 셀의 전체 너비를 채우도록 늘입니다(기본값).

아래는justify-self: start의 예.

.item-1 {
  justify-self: start;
}
1
2
3

place-self속성은 다음과 같습니다align-self속성과justify-self속성의 결합된 단축 형식입니다.

place-self: <align-self> <justify-self>;
1

아래는 예시입니다.

place-self: center center;
1

두 번째 값이 생략된 경우place-self속성은 두 값이 동일한 것으로 간주합니다.