CSS에서 그리드를 만드는 방법은 무엇입니까?

그리드 컨테이너를 정의하려면 디스플레이를 설정해야합니다. 그리드; 2. 그리드 테드 플레이트 컬럼과 그리드-템플릿 열을 사용하여 행과 열 크기를 설정하십시오. 3. FR, Auto, %와 같은 유연한 장치를 사용하여 반응 형 레이아웃을 구현하십시오. 4. 반복 () 함수를 사용하여 반복 된 열 또는 행 정의를 단순화하십시오. 5. 적응 형 그리드를 달성하기 위해 Minmax () 및 자동 피팅/자동 필을 사용하십시오. 6. 선택적으로, 그리드-컬럼, 그리드 행 또는 그리드 영역을 통해 프로젝트 위치를 정확하게 제어합니다. 완전한 설정에는 컨테이너 선언, 트랙 정의, 갭 추가 및 반응 형 최적화가 포함되며 효율적이고 유연한 2 차원 레이아웃을 구축 할 수 있습니다.

강력한 2 차원 레이아웃 시스템 인 CSS 그리드 레이아웃을 사용하여 CSS에서 그리드를 만드는 것은 간단합니다. 단계별로 설정하는 방법은 다음과 같습니다.

1. 그리드 컨테이너를 정의하십시오

그리드를 만들려면 display: grid 컨테이너 요소 :

 .Container {
  디스플레이 : 그리드;
}

이것은 요소를 그리드 컨테이너로 바꾸고 직접 어린이는 그리드 품목이됩니다.

2. 열과 행을 설정합니다

grid-template-columns 과 grid-template-rows 사용하여 열과 행의 크기와 수를 정의하십시오.

예 : 2 줄의 3 열 그리드

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 100px 150px 100px;
  그리드-템플릿 열 : 80px 60px;
  갭 : 10px; / * 그리드 품목 사이에 공간이 추가됩니다 */
}

이것은 생성합니다 :

• 3 개의 열 (100px, 150px, 폭 100px)
• 2 줄 (80px 및 60px)
• 항목 간 10px 간격

3. 유연한 단위 사용 ( fr , auto , % )

반응 형 그리드의 경우 유연한 장치를 사용하십시오.

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1FR 2FR 1FR; / * 중간 열 2 배 */
  그리드-템플릿 열 : 자동 100px;
  갭 : 1rem;
}

• fr = 사용 가능한 공간의 분수
• auto = 컨텐츠에 따라 크기
• % = 컨테이너 폭/높이의 비율

4. 단순성을 위해 repeat() 사용하십시오

반복을 피하려면 repeat() 함수를 사용하십시오.

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 1fr); / * 3 동일 열 */
  갭 : 20px;
}

패턴을 결합 할 수도 있습니다.

 그리드-템플릿-컬럼 : 반복 (3, 150px 1fr);

5. 반응을 유지하십시오

minmax() 및 auto-fit / auto-fill 사용하여 repeat() 사용하십시오.

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (Auto-Fit, Minmax (200px, 1fr));
  갭 : 16px;
}

• 이것은 각각 200px 너비의 적어도 똑같이 확장되는 많은 열을 생성합니다.
• 반응 형 카드 레이아웃에 좋습니다.

6. 아이템을 명시 적으로 배치 (선택 사항)

항목을 정확하게 배치 할 수 있습니다.

 .item1 {
  그리드-컬럼 : 1 / 3; / * 열 1에서 3 열에 걸쳐 */
  그리드 로우 : 1 / 2; / * 한 줄에 걸쳐 */
}

또는 grid-area 사용 :

 .item2 {
  그리드 영역 : 2 / 1 / 3 / 4; / * 행 시작 / col 시작 / 행 끝 / col end * /
}

기본 HTML 예제

 <div class = "컨테이너">
  <div class = "항목"> 1 </div>
  <div class = "항목"> 2 </div>
  <div class = "항목"> 3 </div>
  <div class = "항목"> 4 </div>
  <div class = "항목"> 5 </div>
  <div class = "항목"> 6 </div>
</div>

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (3, 1fr);
  갭 : 10px;
}

.item {
  배경 : Lightblue;
  패딩 : 20px;
  텍스트 정렬 : 센터;
}

그게 다야. CSS 그리드는 단순하고 복잡한 레이아웃 모두에 유연하고 효율적입니다. display: grid , 트랙을 정의하고, 간격을 추가하고, 필요할 때 반응을 유지하십시오. 기본적으로 몇 줄만 있고 당신은 설정됩니다.

위 내용은 CSS에서 그리드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!