깔끔한 그리드의 두 번째 행이 제대로 작동하지 않습니다.

Question

두 번째 행을 만들려면 Neat의 그리드 컨테이너를 사용하려고하지만 두 번째 행은 첫 번째 행의 텍스트 길이가 다르기 때문에 예상대로 시작되지 않습니다.

html로 :

<section id="featuredpost"> 
    <div class="widget-wrap"> 
    <h3>Vehicula Justo Elit Mollis</h3> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    <article class="post"> 
     <a href="#"> 
     <img src="http://placehold.it/350x150"> 
     </a> 
     <header> 
     <h4> 
      <a href="#">Fusce Commodo Ornare Venenatis Egestas</a> 
     </h4> 
     </header> 
    </article> 
    </div> 
</section> 

SCS들 :

.featuredpost { 
    @include grid-container; 
    .post { 
    @include grid-column(4); 
    } 
} 

그리고 여기가 표시 방법의 스크린 샷이다 :,

Example of problem with second row

당신이 볼 수 있듯이 텍스트 때문에 행 1의 첫 번째 게시물의 길이가 행 1의 다른 두 게시물의 텍스트보다 길 때, 두 번째 행에 문제가 발생했습니다. 포스트 요소에 최소 높이를 두어이 문제를 해결할 수 있지만 더 좋은 방법이 있어야합니다. 니트 격자를 올바르게 사용하고 있습니까? 어떤 도움을 주셔서 감사합니다!

Answer 1

몇 가지 옵션이 있습니다. 최상의 선택은 nth-child 선택자와 clear: left;의 조합을 사용하는 것입니다.

예를 들어, 다음과 같이 표시됩니다.

.post { 
    @include grid-column(4); 

    &:nth-child(3n+1) { 
    clear: left; 
    } 
} 

이이 경우 여분의 긴 게시물 제목 그것의 왼쪽에 아무것도 없다는 것을 확인하고, 왼쪽으로 공간을 확보하기 위해 모든 네 번째 포스트의 원인이됩니다.

Answer 2

각각의 "행"을 자체 div로 감싸고 모든 별도의 격자 컨테이너로 만들 수 있습니다. 그런 다음 클리어 픽스가 내장되어 있습니다.

과 같을 것이다 html로의 단순화 된 버전 :

<div class="grid-row"> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
</div> 
<div class="grid-row"> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
    <article class="post"> 
     ... 
    </article> 
</div> 

그리고 SCSS는 다음과 같이 보일 것이다 :

이

.grid-row { 
    @include grid-container; 
    .post { 
    @include grid-column(4); 
    } 
} 

...  
&:nth-child(3n+1) { 
clear: left; 
} 
... 

의 이전에 제안 된 방법은 않습니다 특히 <article> s/rows가 많은 경우 DRYer 코드가 생성됩니다.