제목이 있는 카드를 만들고 있는데 그 아래에는 2열의 다른 카드가 있습니다. 문제는 요소 주위가 아닌 요소 사이에 패딩을 원한다는 것입니다. 적어도 측면에는 패딩이 필요하지 않습니다. 이렇게 하면 제목이 아래 상자와 일치하지 않게 됩니다. 이것이 내가 원하는 것입니다:
각 영주권 카드에 서로 다른 패딩을 주려고 했는데 왼쪽 상단 패딩은 0 1em 1em 0, 오른쪽 상단 패딩은 0 0 1em 1em 등이 됩니다. 이와 같이 "하드 코딩된" 패딩보다는 주어진 수의 카드, 열, 행을 포함하는 일반적인 솔루션을 가질 수 있다면 더 깨끗할 것입니다. 가능합니까?
한 가지 해결책은 헤더를 채우는 것이지만 이는 보기 흉한 해결책처럼 느껴집니다.
상단 및 하단 패딩이 존재할 수 있지만 더 쉬울 경우 왼쪽이나 오른쪽에 놓을 수는 없습니다.
관련 코드:
으아아아 으아아아
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제를 해결하는 가장 쉬운 방법은 이것을 추가하는 것이라고 생각합니다.
으아아아Flex 컨테이너에(이 경우 빨간색 카드 클래스가 있는 div 태그) 아래에서 시도해 보세요.
그리드는 이 문제에 대한 해결책입니다.
grid-template-columns告诉浏览器将 div 间隔两行（如果您想要三列，只需指定三个宽度 - 如果您想让多列具有相同的宽度，您也可以使用repeat()）。然后使用ngap사이의 간격을 바꾸세요.CSS Tips에는 그리드에 대한 좋은 소개가 있고, Kevin Powell에도 이에 대한 좋은 소개가 있습니다