Каменная кладка: с раскладкой из двух столбцов, как у меня 1 столбца шире, чем у другого?

Question

Так что я пытаюсь создать макет кладки 2 колонки, как это: http://i.stack.imgur.com/gq6LJ.png

Я не знаю, как заставить это работать автоматически, как, не имея, чтобы установить определенную ширину на каждой позиции сетки ,

Поскольку я просто перебираю статьи, ни одна из них не имеет определенной ширины. Мне просто нужно, чтобы на правой стороне было 60% ширины, а на левой стороне было 30%.

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <article class="grid-item"> 
     <!-- Content --> 
    </article> 
</div> 

Here is a codepen of my attempt at getting this to work.

Это возможно даже с масонством?

Возможно, с другой библиотекой сетки?

Answer 1

Нет, от того, что я прочитал, масонство не предназначено для получения фиксированного размера одиночных столбцов элементов, как вы хотели, так что ...

Я бы получить ширину окна с помощью JQuery и назначить процент, что ширина для вашего элемента контейнера, как это ...

$(document).ready(function(){ 
    var cWidth = $(window).width() * .7; // 70% or whatever you want 
    cWidth.toFixed(0); 
    $('#container').width(cWidth); 

    $(window).resize(function() { 
     var crWidth = $(window).width() * .7; // 70% or whatever you want 
     crWidth.toFixed(0); 
     $('#container').width(crWidth); 
    }); 
}); 

Затем установите ваши дочерние элементы (столбец) ширину в CSS, как это ...

.left-column { 
    width: 35%; 
} 

.right-column { 
    width: 65% 
}