반복 그리드 패턴 처리 방법 Singularity gs

Question

5 개의 행과 2 개의 열에 10 개의 블로그 게시물을 표시하는 블로그 홈페이지를 구축 중입니다. 각 열은 너비가 50 %이며 왼쪽으로 떠 있습니다. 부트 스트랩의 격자를 사용했다면 각 블로그 기사마다 .col-md-6을 사용할 것입니다. 내가 첫 번째 열에에있는 문서를 위치로 말하고이 사용 singularitygs 여기

@include add-grid(1 1); // Defines a grid of 2 columns 
article { 
    @include grid-span(1,1); 
} 

를 달성하려면 어떻게

. 내가 뻗어있는 위치에서 독립적 인 그리드 클래스를 어떻게 만듭니 까?

아래처럼 자신 만의 CSS를 작성합니까?

article { 
    width: 50%; 
    float: left; 
} 

나는이 동작을 달성하기 위해 모든 블로그 게시물에 대해 하나의 클래스를 사용하고 싶습니다.

Answer 1

부트 스트랩은 Singularity가 Float이라고 부르는 것을 사용합니다. output style. Singularity 1.2+를 사용하면 @include sgs-change('output', 'float');을 사용하여 출력 방법을 변경할 수 있습니다. grid-span 외에도 Singularity와 함께 제공되는 출력 스타일은 각 출력 스타일이 약간 다른 정신 모델을 가지고 있으므로 출력 별 스팬 믹스를 제공합니다. float-span은 Flout 출력 스타일의 범위이며, 여러분이 갖고있는 것과 같은 대칭 그리드에서 서로에 대해 맞춘 여러 항목에 적합합니다.

부트 스트랩은 현재 유체 거터가 아닌 고정 된 거터를 가지고 있으므로 고정 너비의 홈통의 경우 Singularity의 거 터를 0 또는 고정 번호로 설정해야합니다 (padding을 내부에 추가). 패딩을 추가하는 경우 항목의 상자 모델을 border-box으로 변경하십시오.

당신이 가지고있는 한 가지 차이점은 진행할 때 고려해야 할 것은 각 행의 첫 번째 항목이 모든 것이 떠 다니는 방향 (이 경우 clear: left)을 지울 필요가 있다는 것입니다. 이것은 nth-of-type(odd)으로 할 수 있지만, 유형이 클래스가 아니라 태그라는 사실을 명심하십시오. 원하는 결과를 정확히 산출하지 못할 수도 있습니다 (사용률의 약 90 %를 차지할 것입니다). 그렇게하지 않으면, 서로 다른 크기의 콘텐츠로 인해 어색한 행이 생길 수 있습니다.

이 모든 것을 보여주는 데 대해서는 SassMeister 예를 참조하십시오.