요소들 사이의 CSS 고정 크기 여백

Question

이것은 특정 프로젝트에서 계속 나오고 있으며 누구에게나 더 나은 솔루션이 있는지 알고 싶었습니다.

본질적으로, 나는 div 요소의 그룹이 모두 같은 양의 간격을 가지려고 노력하고 있지만 주위는 같지 않습니다. 아래의 스 니펫은 내가 찾고있는 것의 예입니다. 누군가가 더 깨끗한 해결책을 갖고있을 수 있기를 바랍니다.

더 적은 CSS 나 더 적은 HTML 요소를 사용할 수있는 더 나은 솔루션을 가진 사람이 있다면 누구나 제 질문입니다. 중요한 일들이 유지 :

• 현지화 준수 - 우리가 마진을 왼쪽이나 오른쪽으로 RTL에 어떤 이상한 현지화 문제
• 정렬이없는 사용하지 않기 때문에 - 그것은해야 전체 창 경우에없는 크기 그것은 필요하지 않지만 필요하다면 감싸 야합니다.
• 간격 (예 참조) - 일정한 공간이어야한다 요소

사이에 당신이 어떤 아이디어가 있다면 내가 그들을 듣고 싶어요!

 body { 
 
      background-color: black; 
 
      padding: 30px; 
 
     } 
 
     .inner { 
 
      overflow: hidden; 
 
      margin: 20px 0px; 
 
     } 
 
     .innerMargin { 
 
      background-color: white; 
 
      display: flex; 
 
      flex-direction: row; 
 
      flex-wrap: wrap; 
 
      margin: -10px; 
 
     } 
 
     .innerMargin > div { 
 
      flex: 0 0 20px; 
 

 
      background-color: red; 
 
      margin: 10px; 
 
      height: 20px; 
 
      width: 20px; 
 
     } 
 
     .fixedWidth { 
 
      width: 180px; 
 
     }

<div class="inner"> 
 
     <div class="innerMargin"> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
     </div> 
 
    </div> 
 
    <div class="inner fixedWidth"> 
 
     <div class="innerMargin"> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
      <div></div> 
 
     </div> 
 
    </div>

Answer 1

나는 이것이 CSS Grid로 사소한 것이라는 점에 유의해야한다고 생각한다.

body { 
 
    background-color: #000; 
 
} 
 

 
.container { 
 
    display: grid; 
 
    grid-template: 20px/repeat(auto-fit, 20px); 
 
    grid-gap: 20px; 
 
    background-color: #FFF; 
 
    margin: 20px; 
 
} 
 

 
.container div { 
 
    background-color: red; 
 
} 
 

 
.fixed-width { 
 
    width: 180px; 
 
} 
 

 
.container > div { 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
</div> 
 
<div class="container fixed-width"> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div> 
 
</div>

CodePen here

Answer 2

당신이 항상, 당신은 같은 것을 할 수있는 fixedwidth 상자에 5 개 상자해야합니다 알고있는 경우 :

.container 
    - 5.times do 
    .box 

.container.container--thinner 
    - 15.times do 
    .box 

HTML (슬림)

CSS (SCSS)

$width : 36; 
body {background-color: #000;} 
.container { 
    display:flex; 
    flex-wrap: wrap; 
    background-color: white; 
    margin-bottom: 2em; 
    width: $width + em; 

    .box { 
    width: 2em; 
    height: 2em; 
    margin-right: 2em; 
    background-color: red; 
    } 

    &--thinner { 
    justify-content: space-between; 
    width: $width/2 + em; 

    .box { 
     margin-bottom: 2em; 
     &:nth-of-type(5n) { 
     margin-right: 0; 
     } 
    } 
    } 
} 

는 여기 Codepen

Answer 3

는 대답은 현재 사용하지 않는처럼 ...이이 문제에 대한 최적의 솔루션이 될 것 같은데입니다. 모두에게 감사드립니다!