2013-05-14 3 views
1

새로운 Drupal 사이트에 대해 zen grids을 실험 중입니다. 선 스타터 테마를 사용하고 있습니다. 5 개의 목록 항목이있는 정렬되지 않은 목록이있는 5 열 그리드가 있다고 가정 해 봅시다. 그 안에. 내 scss 파일에서 각각 <li>을 첫 번째 목록 항목에는 왼쪽 여백이없고 마지막 목록 항목에는 오른쪽 여백이없고 각각 하나만 넓게 설정해야한다고 말하고 싶습니다.위치 인수가없는 젠 (zen) 격자 항목

나는 zen-grid-item과 zen-grid-flow-item mixins를 보았지만 이것을 수행하지 못했습니다. 누구라도 나에게 간단한 예를 줄 수 있니? 여기 당신은 [선 그리드 흐름 항목() (http://zengrids.com/help/#zen-grid-flow를 포함한 약간의 행운을 시도 할 수 있습니다

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
    <li>Fourth</li> 
    <li>Fifth</li> 
</ul> 

ul { 
    $zen-column-count: 5; 
    $zen-gutter-width: 30px; 
    @include zen-grid-container; 
    li { 
    /* Not sure what to put here to make each <li> 1 column wide */ 
    } 
} 
+0

일부 샘플 마크 업입니다 - 항목) mixin. zen-grid-flow-item (1,5)과 같은 것이 효과적 일지 모르지만 방구석에 대해 읽고 약간 떠 있어야합니다. –

+0

어떤 이유로 든이 기능이 작동하지 않으면 두 번째 줄의 첫 번째, 젠 그리드 항목 (1, 2)에 zen-grid-item (1, 1) , 등등 ... 우아하지는 않지만 안전한 대안으로 ;-) –

답변

0
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
</ul> 

ul { 
    $zen-column-count: 5; 
    $zen-gutter-width: 0; 
    @include zen-grid-container; 

    background: #eee; 

    width: 70%; 
    margin: 0 auto; 
    li { 
    @include zen-grid-flow-item(1, 5); 
    @include zen-float(left); 
    height: 100px; 
    border: 1px solid #fff; 
    } 
}