시맨틱 UI Stackable Grid - 공백을 사용하거나 동적으로 스택 가능한 그리드의 너비를 얻으십시오.

Question

어쩌면이 작업이 더 복잡 할 수도 있고 어쩌면 가능하지도 않을 수도 있지만 ... 이상적으로 공백이 있다면 나는 그것을 활용하고 싶다.

시맨틱 UI 스태커 블 그리드를 사용하고 있습니다. 예제 스크린 샷에서 브라우저 폭을 약간 넓게 설정하면 다른 '포스트'가 오른쪽에 나타나고 3 개의 열이 표시됩니다. 완전한!

'사용되지 않은 공간'을 동적으로 계산하는 방법이 있는지 알고 싶습니다. 특정 양을 넘으면 그 공간에 작은 항목을 표시 할 수 있습니다.
그런 다음 사용자가 브라우저를 조금 넓게 만들면 다른 게시물이 오른쪽에 3 개의 열로 나타나고 작은 항목이 사라집니다.

올바른 방향의 포인트가 놀랍습니다. 동적으로 열의 수를 계산할 수 있으므로 창 너비와 비교하여 총 너비를 계산할 수 있습니까 ?? 이것을 달성하는 다른 방법은 없습니까?

감사합니다, Lezlea

내 사이트가 베타 테스트에 있습니다 http://fishtag.world/

http://www.lezlea.co.uk/fishtag/todelete/whitespace.png

Answer 1

스택 그리드가 사용 가능한 공간에 걸쳐 당신의 열을 유지해야하고 작은 화면에 모두 100 %를해야한다 (https://jsfiddle.net/ryan_whitlie/2sLw5bon/),하지만 작은 화면 크기를 누르기 전에 자네가 감싸는 것 같다. 열에 약간의 여백이 적용되어있을 가능성이 있습니까?

당신이 원하는 것을 얻기 위해서는 그 부분을 2 개의 열로 나누는 것이 좋을 것입니다. 남은 부분은 가로 75 %, 오른쪽 25 %입니다. 왼쪽에 '게시물'을 표시하고 오른쪽에 다른 콘텐츠를 표시합니다. 화면 크기가 특정 크기에 도달하면 그 다음 오른쪽 열을 숨기 만 CSS 미디어 쿼리를 사용하여 게시물을 보여이 어떤 화면/장치에 폭과 쇼 (display: block;) 두 열을 적용합니다

@media(min-width: 600px) { 
    .posts { 
     width: 75%; 
    } 
    .aside { 
     width: 25%; 
     display: block; 
    } 
} 

을 600px 이상의 너비.

여기에 체크 아웃 작업 버전과 https://jsfiddle.net/ryan_whitlie/cg9p3kuw/