이미지와 CSS 그리드 레이아웃 만들기

Question

내가 CSS를 사용하여 좋은 그리드 레이아웃을 만들기 위해 노력하고 있지만, 33.3333 %

그리드 스타일 I의 개별 열 행과 3 행에 표시를 얻을 수 없다 가는거야 this입니다.

여기에 제가 지금까지 가지고있는 코드가 있습니다.

HTML :

<section id="web"> 
    <div class="row"> 
    <span class="web large-3 columns"><img src="images/1.gif"></span> 
    <span class="web large-3 columns"><img src="images/2.jpg"></span> 
    <span class="web large-3 columns"><img src="images/3.png"></span> 
    </div> 
    <div class="row"> 
    <span class="web large-3 columns"><img src="images/4.jpg"></span> 
    <span class="web large-3 columns"><img src="images/5.png"></span> 
    <span class="web large-3 columns"><img src="images/6.jpg"></span> 
    </div> 
</section> 

CSS :

내 JSFiddle

section { display: block; } 

section#web { 
background: #f8f8f8; 
padding: 80px 0; 
} 

.row { 
width: 100%; 
margin: 0 auto; 
max-width: 1144px; 
} 

span.web { 
margin-bottom: 20px; 
text-align: center; 
position: relative; 
border: 1px solid #e3e3e3; 
} 

.row .large-3 { 
position: relative; 
width: 33.33333%; 
} 

.row .columns { 
position: relative; 
padding-left: .83333em; 
padding-right: .83333em; 
width: 100%; 
float: left; 
} 

.

Answer 1

너비를 픽셀로 설정합니다. 대신 비율 (예 : 너비 : 33 %)을 사용해야합니다. 그리고이 레이아웃의 경우 33.3은 여백에 20px를 적용 할 때 좋지 않은 선택입니다. 어쩌면 28 %는 괜찮을 것입니다.

바이올린 : http://jsfiddle.net/Vfffg/119/

.container > div { 
    margin: 20px; 
    width: 28%; 
    height: 100px; 
    background: blue; 
    float: left; 
    color: #fff; 
    text-align: center; 
}