3개의 동일한 열 CSS 그리드 레이아웃
CSS 그리드 레이아웃을 시각적으로 디자인합니다. 열, 행 및 간격을 설정한 다음 셀에 영역 이름을 입력하여 그리드 템플릿 영역을 만듭니다. 실시간 미리보기와 복사 가능한 CSS 및 HTML을 사용합니다.
처리 중...
0%
결과
이 페이지는 이름이 지정된 영역이 꺼진 상태에서 단일 행에 3개의 동일한 너비 열로 설정된 그리드 생성기를 엽니다. 레이아웃은 "항상 사용 가능한 너비를 균등하게 분할하는 3개의 열"을 말하는 가장 짧은 방법인 반복(3, 1fr)입니다.
동일 너비 열은 카드 그리드, 가격표 및 이미지 갤러리의 핵심입니다. 모든 열이 동일한 역할을 하기 때문에 영역에 이름을 지정할 필요가 없으므로 일반 트랙 크기 조정이 그리드 템플릿 영역 선언보다 더 명확합니다. 행을 추가하면 동일한 3개의 트랙이 아래에서 반복되며 여전히 완벽하게 균일합니다.
더 조밀한 그리드를 위해 열 수를 늘리거나 나중에 열을 나머지 열보다 돋보이게 해야 하는 경우 명명된 영역을 켜십시오. 아래 CSS와 HTML은 실행하는 순간 업데이트됩니다. 모든 것이 클라이언트 측에서 실행되므로 업로드할 것도 없고 기다릴 것도 없습니다.