이 격자의 모든 상자 사이에 등 간격을 추가하는 방법은 무엇입니까?

Question

방문 페이지를 만들려고하고 있는데 지금은 각 상자에 자리 표시 자 이미지가 있지만 그 상자 사이에 공백을 추가하려고합니다. 생성 된 모든 상자 사이에 공백을 만들 수 있으며 응답 성을 부여 할 수 있습니까? 내 생각은 컨테이너를 만들고 여백과 패딩을 뒤죽박죽 처리하지만 모바일보기에서는 엉망으로 만듭니다. 사전에 도움의 모든

.twocolumn { 
 
    width: 100%; 
 
    background-size: cover; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.twocolumn2 { 
 
    width: 50%; 
 
    background-size: cover; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.onecolumn { 
 
    width: 25%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.twocolumn h2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion one; 
 
    color: #FFF; 
 
} 
 

 
.twocolumn2 h2{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion One; 
 
    color: #FFF; 
 
} 
 

 
.onecolumn h2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion one; 
 
    color: #FFF; 
 
    font-size: 14px; 
 
} 
 

 

 
.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
.columnimg { 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    background: white; 
 
    margin: 50px; 
 
    text-align: center; 
 
    font-family: passion one; 
 
    font-size:5vw; 
 
    letter-spacing: 3vw; 
 
    
 
}

<div class="clearfix"> 
 
     
 
     <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="twocolumn2 clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 

 
     
 
     <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
      </div></a></div>

감사합니다.

Answer 1

나는 무엇을하고 싶은지 모르지만 CSS 그리드를 사용하지 않는 특별한 이유가 있습니까? 그것은 완벽하게 보입니다.

이외에는 기본적으로 여백과 여백을 사용해야합니다. 모바일보기에서 엉망이되지 않도록 미디어 쿼리를 사용하십시오. 이처럼 :

@media print, screen and (min-width: 640px) { 
    //this css only applies when there is at least 640px of horizontal space (common tablet width) 
} 

편집 : 요청 CSS-격자 예를 들어 : (참고 :.. CSS-그리드 인 flexbox을 대체하지만, 오히려 함께 작동하지해야 당신이 맞는 볼 조합을 사용하여 주어진 정보 이 간격으로 그 레이아웃 문제를 해결해야

.wrapper { 
 
    display: grid; 
 
    grid-template-rows: 200px 200px auto 200px; 
 
    grid-template-columns: 2fr 1fr 1fr; 
 
    grid-template-areas: 
 
    "logo top-left top-right" 
 
    "logo bottom-left bottom-right" 
 
    "main main main" 
 
    "bottom-row bottom-row bottom-row"; 
 
    grid-column-gap: 6px; 
 
    grid-row-gap: 6px; 
 
} 
 

 
.logo { 
 
    grid-area: logo; 
 
    background-color: red; 
 
} 
 
.menu-top-left { 
 
    grid-area: top-left; 
 
    background-color: blue; 
 
} 
 
.menu-top-right { 
 
    grid-area: top-right; 
 
    background-color: blue; 
 
} 
 
.menu-bottom-left { 
 
    grid-area: bottom-left; 
 
    background-color: blue; 
 
} 
 
.menu-bottom-right { 
 
    grid-area: bottom-right; 
 
    background-color: blue; 
 
} 
 
.main { 
 
    grid-area: main; 
 
    background-color: green; 
 
    
 
    height: 400px; 
 
} 
 
.bottom-row { 
 
    grid-area: bottom-row; 
 
    background-color: yellow; 
 
}

<div class="wrapper"> 
 
    <div class="logo"></div> 
 
    <div class="menu-top-left"></div> 
 
    <div class="menu-top-right"></div> 
 
    <div class="menu-bottom-left"></div> 
 
    <div class="menu-bottom-right"></div> 
 
    <div class="main"></div> 
 
    <div class="bottom-row"></div> 
 
</div>

하지만, 응답을 위해, 당신이 prob는 것, 나는) CodePen 여기에 동일한 코드를 할 수 없어 여전히 미디어 쿼리가 필요합니다.

Answer 2

저는 Flexbox를 사용합니다. 플렉스를 1로 설정하고 끝 부분에 공간을두고 싶다면 스페이스 사이 또는 스페이스 바를 맞추는 것을 정당화하십시오.