Tailwind CSS는 사용자가 grid-cols 및 grid-rows 유틸리티를 사용하여 웹 페이지를 열과 행으로 나눌 수 있는 그리드 시스템을 제공합니다. 또한 그리드 열 전체에서 요소의 크기 조정 및 배치를 제어하는 그리드 열 시작 및 종료 유틸리티를 제공합니다. 이러한 유틸리티를 사용하면 그리드 레이아웃 내에서 요소의 시작 및 끝 위치를 지정할 수 있습니다.
이 문서에서는 Tailwind CSS의 특정 n번째 그리드 선에서 열을 시작하거나 끝내는 방법을 설명합니다.
Tailwind의 n번째 그리드 선에서 열을 시작하거나 끝내는 방법은 무엇입니까?
Tailwind의 n번째 그리드 선에서 열을 시작하거나 끝내려면 ' 열-시작-
1단계: HTML 프로그램에서 그리드 요소의 시작 및 끝 위치 지정
HTML 프로그램을 만들고 ' 열-시작-
< 몸 >
< h1 수업 = 'text-2xl 텍스트 센터' >
Tailwind CSS - 열 시작 / 끝
h1 >
< 사업부 수업 = '그리드 grid-cols-4 gap-3 m-3' >
< 사업부 수업 = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 사업부 >
< 사업부 수업 = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 사업부 >
< 사업부 수업 = 'col-start-3 col-end-5 bg-teal-500 p-5' > 삼 사업부 >
< 사업부 수업 = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 사업부 >
< 사업부 수업 = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 사업부 >
사업부 >
몸 >
여기 부모
- “ 그리드 ”는 그리드 레이아웃을 생성하는 데 활용됩니다.
- “ 그리드-cols-4 ” 클래스는 그리드에 크기가 동일한 4개의 열이 있어야 함을 지정합니다.
- “ 갭-3 ” 클래스는 각 그리드 항목 사이의 간격을 3 단위로 설정합니다.
- “ m-3 ” 클래스는 그리드 컨테이너 주위에 3단위의 여백을 추가합니다.
내부 하위
- “ 열-시작-2 ” 속성은 그리드 항목이 열 2에서 시작하도록 지정합니다.
- “ 열-스팬-2 ”는 그리드 항목이 2열을 차지함을 나타냅니다.
- “ 열-시작-1 ”는 열 1에서 그리드 항목을 시작하는 데 사용됩니다.
- “ col-end-3 ”는 그리드 항목이 열 3에서 끝나도록 지정합니다.
- “ 열-시작-3 ”는 그리드 항목이 두 번째 열에서 시작함을 나타냅니다.
- “ 콜 엔드-5 ” 속성은 열 5에서 그리드 항목을 끝냅니다.
- “ 열-스팬-3 ”는 그리드 항목이 3열을 차지하도록 지정합니다.
- “ bg-청록-500 ”는 청록색을 모든 그리드 항목의 배경으로 설정합니다.
- “ p-5 ”는 그리드 항목 내부의 콘텐츠에 5단위의 패딩을 추가합니다.
2단계: 출력 확인
그리드 열 시작 및 끝 위치가 적용되었는지 확인하려면 HTML 웹 페이지를 보십시오.
위의 출력은 그리드 열 시작 및 끝 위치가 지정된 위치에 따라 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind의 n번째 그리드 선에서 열을 시작하거나 끝내려면 ' 열-시작-