문제:
CSS 그리드 레이아웃에서 이중 테두리를 어떻게 제거할 수 있습니까? 그리드 항목 사이에? 이는 그리드 컨테이너와 해당 하위 요소 모두에 테두리를 사용할 때 일반적입니다.
답변:
그리드 속성으로 테두리 축소
이중 테두리를 방지하려면 CSS 그리드를 사용하여 그리드 항목의 테두리를 대체 기술로 바꾸는 것을 고려하세요. 속성:
1. 컨테이너 배경색 사용:
그리드 항목의 테두리 대신 "테두리" 색상을 컨테이너의 배경색으로 적용합니다.
CSS:
.wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; border: 1px solid black; // Define "border" color grid-gap: 1px; // Set "border" width background-color: black; // Replaces border on grid items }
2. 그리드 간격 사용:
grid-gap 속성은 그리드 항목 사이에 간격을 만들어 "테두리" 너비를 효과적으로 모방합니다. 간격을 원하는 테두리 너비로 설정하세요.
CSS:
.wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; grid-gap: 1px; // Set "border" width } .wrapper > div { background-color: white; // No border on grid items }
HTML:
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
By 이러한 기술을 활용하면 CSS 그리드 레이아웃에서 이중 테두리를 방지하고 깔끔하고 통일된 모양을 얻을 수 있습니다.
위 내용은 CSS 그리드 레이아웃에서 이중 테두리를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!