CSS 3 열 응답 그리드

Question

그룹화가없는 <div> 플로팅이 많은 3 열 반응 형 그리드 레이아웃을 만들고 싶습니다.하지만 첫 번째 미디어 쿼리 이후에 실패하고 응답하지 않습니다. 잘 작동하지만 일반 데스크톱보기를 파악할 수 없습니다. 데스크톱에서 (990px까지) 레이아웃이 다음과 같이되어야하기 때문일 수 있습니다. 첫 번째 col (왼쪽 정렬) 또는 두 번째 col (정렬 된 가운데)보다 20px 갭보다 왼쪽 여백 또는 여백없이 20px 간격과 세 번째 col 오른쪽). 오른쪽 여백이나 패딩이 없습니다.

HTML은 다음과 같습니다

<div class="container"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div> 

는 CSS :

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.container { 
    max-width: 904px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.item { 
    width: 288px; 
    float: left; 
} 

@media screen and (max-width: 960px) { 
    .container { 
    width:98%; 
    } 

    .item { 
    width: 50%; 
    padding: 1% 4%; 
    margin: 0; 
    } 
} 
@media screen and (max-width: 600px) { 
    .item { 
    width: auto; 
    padding 1% 4%; 
    margin: 0; 
    } 
} 

내가 nth-child()를 사용하여 생각했지만 이제 나는 20 픽셀의 마진을 원하는 가정 해 봅시다 때문에 올바른 순서를 알아낼 수 중간에있는 모든 요소에 대해 다음과 같이됩니다 : 2,5,8,11,14, .., n wile 후에 jason을 사용하려고했지만 js를 사용하고 싶지 않습니다. 거기에 어떤 CSS 기반의 솔루션이 있습니까?

Answer 1

당신은 n 번째 아이 아이디어가 효과가 있습니다. 시도 :

.item:nth-child(3n+2) 
{ 
    background-color:#f00; 
}