Tailwind CSS에서 행 범위는 요소가 그리드 내에서 두 개 이상의 행을 차지하도록 만듭니다. 요소가 점유/스팬해야 하는 행 수를 정의하는 데 사용됩니다. 이를 통해 사용자는 여러 행에서 그리드 항목의 크기와 위치를 조정하고 다양한 레이아웃을 만들 수 있습니다. 또한 웹 페이지를 위한 유연하고 반응이 빠른 그리드 레이아웃을 만드는 데 사용할 수 있습니다.
이 글은 Tailwind CSS에서 행 범위를 만드는 방법을 예시합니다.
Tailwind에서 행 스팬을 만드는 방법은 무엇입니까?
Tailwind에서 행을 확장하려면 HTML 프로그램을 만드세요. 그런 다음 ' 행 범위-<값> ” 유틸리티를 사용하고 확장할 행 수를 정의합니다. 각 특정 요소에 걸쳐야 하는 행 수를 정의해야 합니다. 마지막으로 확인을 위해 HTML 웹 페이지에서 변경 사항을 봅니다.
실제 구현을 위해 제공된 단계를 확인하십시오.
1단계: HTML 프로그램에서 열 범위 만들기
HTML 프로그램을 만들고 ' 행 범위-<값> 열 범위를 만들기 위한 그리드 항목이 포함된 유틸리티. 예를 들어 ' 행-스팬-3', '행-스팬-2' 및 '행-스팬-4 ” 아래와 같은 유틸리티:
< 몸 >
< 사업부 수업 = 'grid grid-rows-4 grid-flow-col gap-3 m-3 텍스트 센터' >
< 사업부 수업 = '행-스팬-3 bg-teal-500 p-5' > 1 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 2 < / 사업부 >
< 사업부 수업 = '행 스팬-2 bg-teal-500 p-5' > 삼 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 4 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 5 < / 사업부 >
< 사업부 수업 = '행 스팬-4 bg-teal-500 p-5' > 6 < / 사업부 >
< / 사업부 >
< / 몸 >
여기 부모
- “ 그리드 ” 클래스를 활용하여 그리드 레이아웃을 생성합니다.
- “ 그리드 행-4 ” 클래스는 그리드의 행 번호를 4로 설정합니다.
- “ 그리드 흐름 열 ” 클래스는 그리드 항목을 열에 수평으로 배치합니다.
- “ 갭-3 ” 클래스는 각 그리드 항목 사이의 간격을 3 단위로 설정합니다.
- “ m-3 ” 클래스는 그리드 컨테이너 주변에 3단위의 여백을 적용합니다.
- “ 텍스트 센터 ” 클래스는 각 그리드 항목의 텍스트를 가운데로 설정합니다.
하위
- “ 행 범위 3 ” 클래스는 요소가 그리드의 3개 행에 걸쳐 있어야 함을 지정합니다.
- “ 행 범위 2 ” 클래스는 요소가 그리드에서 2행에 걸쳐 있어야 함을 나타냅니다.
- “ 행 스팬-4 ” 클래스는 요소가 그리드의 4개 행에 걸쳐 있어야 함을 지정합니다.
- “ bg-청록-500 ” 클래스는 청록색을 그리드 항목의 배경으로 설정합니다.
- “ p-5 ” 클래스는 자식 항목 내부의 콘텐츠에 5단위의 패딩을 추가합니다.
2단계: 출력 확인
행 범위가 적용되었는지 여부를 확인하려면 HTML 웹 페이지를 보십시오.
위의 출력에서 행 범위가 지정된 대로 성공적으로 적용되었음을 확인할 수 있습니다.
결론
Tailwind에서 행 범위를 지정하려면 ' 행 범위-<값> ” HTML 프로그램의 유틸리티를 사용하고 각 요소가 확장해야 하는 행 수를 지정합니다. 확인을 위해 HTML 웹 페이지에서 변경 사항을 확인하십시오. 이 글은 Tailwind CSS에서 행 범위를 만드는 방법을 예시했습니다.