CSS 하위 그리드를 사용하여 카드 레이아웃 구축
깨끗하고 정렬 된 카드 레이아웃을 만드는 것은 웹 개발에서 일반적인 작업입니다. 이 튜토리얼에서는 행당 4 장의 카드 그리드를 구축하는 것을 안내합니다. 각 카드에는 CSS 그리드와 강력한 CSS 하위 그리드 기능을 사용하여 카드 내에서 수평으로 정렬 된 제목, 이미지, 가격, 총알 포인트 목록 및 CTA (Call-to-Action) 버튼 등 여러 컨텐츠 블록이 포함되어 있습니다.
당신이 만들 것입니다
- 에이 카드 그리드 레이아웃 (행당 최대 4 장의 카드).
- 각 카드에는 수평으로 정렬 된 여러 컨텐츠 블록이 포함되어 있습니다.
- 사용 CSS 그리드 전체 레이아웃의 경우.
- 사용 CSS 하위 그리드 각 카드 내부의 내부 컨텐츠 정렬.
![카드 그리드]()
CSS 하위 그리드를 사용하는 이유는 무엇입니까?
CSS Subgrid는 중첩 그리드가 부모 그리드의 트랙 크기를 상속받을 수있는 비교적 새로운 기능입니다. 즉, 트랙 크기를 수동으로 계산하거나 복제하지 않고도 내부 컨텐츠를 외부 그리드와 완벽하게 정렬 할 수 있습니다.
Post Comment