2015-01-05 7 views
0

에 처분 내가 좋아하는 Susy 2 간단한 3 열/3 열 격자를 만들고 싶어 :이교도 순서/3 열 그리드

1 2 3 
4 5 6 
7 8 9 

하지만 블록은 버그와 이단 순서에 떠있다. 여기 http://img.spheerys.fr/images/2015/01/05/bug-susy.jpg

내 HTML 마크 업 : 당신은 모양을 가질 수

다음
<article class="block">1</article> 
<article class="block">2</article> 
<article class="block">3</article> 
<article class="block">4</article> 
<article class="block">5</article> 
<article class="block">6</article> 
<article class="block">7</article> 
<article class="block">8</article> 
<article class="block">9</article> 

내 Susy지도 :

$susy: (
    global-box-sizing: border-box, 
    use-custom: (
    rem: true 
), 
    columns: 12, 
    column-width: 4em, 
    gutters: 1/4 
); 

그리고 마지막으로, 내 말대꾸 :

.block 
    +span(4 of 12) 
    &:nth-child(3n) 
    +last 
    +break 

무슨 일있어?

+0

제공된 코드로 문제를 재현 할 수 없습니다 ([my sassmeister attempt] (http://sassmeister.com/gist/e8e119d24ae8c4877ec1) 참조). 다른 마크 업이 있습니까? 다른 형제 요소들? 사물에 영향을 미치는 다른 CSS는 무엇입니까? –

+0

당신 말이 맞았습니다 : 직전에 마크 업이 있습니다. 삭제하기 전 또는 기사 앞에 공백이 두 개 삽입 된 경우

플로트가 잘되고 있습니다. 매우 이상한 행동 ... 나는 지금 "
"팁으로 "해결"했습니다 ... – Hedy

답변

0

:nth-child 카운트 모든 형제 요소. 따라서 :nth-child(3n)은 모든 세 번째 .block에 적용되는 것이 아니라 모든 세 번째 형제 인 .block에 해당합니다. :nth-child을 사용할 때 가장 좋은 해결책은 다른 형제없이 자신의 부모에 모든 목록 항목을 래핑하는 것입니다.

는 Susy는 ... 갤러리 레이아웃 이런 종류의 생성에 대한 바로 가기를 제공

HTML :

<!-- wrap all your blocks in a div --> 
<div> 
    <article class="block">1</article> 
    <article class="block">2</article> 
    <article class="block">3</article> 
    <article class="block">4</article> 
    <!-- more blocks... --> 
</div> 

말대꾸 : 당신이 필요로하는 모든이어야한다

.block 
    +gallery(4 of 12) 

.