이 문서에서는 Tailwind CSS의 행 그리드에 중단점 및 미디어 쿼리를 적용하는 방법을 예시합니다.
Tailwind의 행 그리드에 중단점 및 미디어 쿼리를 적용하는 방법은 무엇입니까?
Tailwind의 행 그리드에 중단점과 미디어 쿼리를 적용하려면 HTML 프로그램을 만드세요. 그런 다음 '를 사용하여 다양한 화면 크기에 대한 행 수를 정의합니다. 에스엠 ”, “ 메릴랜드 ' 또는 ' 엘지 ' 중단점 ' 그리드-행-<값> ” 유틸리티. 다음으로 화면 크기를 조정하여 웹 페이지의 변경 사항을 확인하십시오.
실제 구현을 살펴보겠습니다.
1단계: HTML 프로그램에서 행 그리드와 함께 중단점 및 미디어 쿼리 사용
HTML 프로그램을 생성하고 ' 그리드-행-<값> ' 공익사업. 예를 들어 ' 메릴랜드 ” 중단점을 ' 그리드 행-3 ” 유틸리티 및 “ 엘지 ' 중단점 ' 그리드 행-5 ” 다양한 화면 크기에서 행 수를 변경하는 유틸리티:
< 몸 >
< 사업부 수업 = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< 사업부 수업 = 'bg-teal-500 p-5' > 1 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 2 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 삼 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 4 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 5 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 6 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 7 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 8 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 9 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 10 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- “ 그리드 ” 클래스를 활용하여 그리드 레이아웃을 생성합니다.
- “ 그리드 행-2 ” 클래스는 그리드에 동일한 크기의 행 2개가 있어야 함을 지정합니다.
- “ md:그리드-행-3 ” 클래스는 중간 화면 크기에서 그리드를 3개의 동일한 크기의 행으로 변경합니다.
- “ lg:그리드-행-5 ” 클래스는 큰 화면 크기에서 그리드를 동일한 크기의 5행으로 변경합니다.
- “ 그리드 흐름 열 ” 클래스는 그리드 항목을 열에 수평으로 배치합니다.
- “ 갭-3 ” 클래스는 각 그리드 항목 사이의 간격을 3 단위로 설정합니다.
- “ m-3 ” 클래스는 그리드 컨테이너 주변에 3단위의 여백을 적용합니다.
- “ 텍스트 센터 ” 클래스는 각 그리드 항목의 텍스트를 가운데로 설정합니다.
- “ bg-청록-500 ” 클래스는 청록색을 그리드 항목의 배경으로 설정합니다.
- “ p-5 ” 클래스는 자식 내부의 콘텐츠에 5단위의 패딩을 추가합니다.
항목.
2단계: 출력 확인
중단점 및 미디어 쿼리가 행 그리드에 적용되었는지 확인하려면 화면 크기를 변경하여 HTML 웹 페이지를 봅니다.
위의 출력에서 화면 크기에 따라 행 수가 변경되는 것을 볼 수 있습니다. 이는 중단점과 미디어 쿼리가 행 그리드에 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind의 행 그리드에 중단점 및 미디어 쿼리를 적용하려면 ' 에스엠 ”, “ 메릴랜드 ' 또는 ' 엘지 ' 중단점 ' 그리드-행-<값> ” 유틸리티. 그런 다음 화면 크기를 변경하여 웹 페이지의 변경 사항을 확인하십시오. 이 기사에서는 Tailwind CSS의 행 그리드에 중단점 및 미디어 쿼리를 적용하는 방법을 예시했습니다.