Динамическая сетка с разной шириной css3?

Question

мне нужно выполнить динамическую систему сетки, как это:

Каждая секция представляет собой изделие, которое содержит изображение, заголовок и ссылку/кнопку в этой статье. Проблема в том, что каждый раздел загружается динамически, и у меня есть только html раздела, поэтому мне нужно динамически помещать каждый раздел в правильное положение из CSS. Единственное, что я знаю, это 5 разделов.

HTML-код каждого раздела и емкости всех секций заключается в следующем:

<section class="scroll"> 
    <!-- ARTICLES --> 
     <!-- ARTICLE --> 
     <div class="article-content"> 
      <img class="article-image" src="${item.imgPath}" /> 
      <div class="article-texts"> 
       <h1 class="article-title">${item.title}</h1> 
       <a class="article-button" href="${item.link}.html" role="button">Read Article ></a> 
      </div> 
     </div> 
     <div class="clear"></div> 
     <!-- END ARTICLE --> 
    <!-- END ARTICLES --> 
</section> 

Answer 1

Решение только с участием поплавки может воспроизвести макет. Совместимость IE8 + (и даже ниже, но никто не заботится). Здесь используется псевдокласс класса :nth-child() (совместимый с IE9 +), чтобы дать произвольную ширину и высоту для демонстрации, у вас будет собственный макет в реальных условиях.

* { box-sizing: border-box; } 
 
div { width: 360px; } 
 
section { border: 1px solid #666; } 
 
.left { float: left; } 
 
.right { float: right; } 
 
.clear { clear: both; } 
 
section:nth-child(1) { width: 240px; height: 240px; } 
 
section:nth-child(2) { width: 120px; height: 100px; } 
 
section:nth-child(3) { width: 120px; height: 80px; } 
 
section:nth-child(4) { width: 200px; height: 120px; } 
 
section:nth-child(5) { width: 160px; height: 100px; }

<div> 
 
    <section class="left">1</section> 
 
    <section class="right">2</section> 
 
    <section class="right">3</section> 
 
    <section class="left clear">4</section> 
 
    <section class="right">5</section> 
 
</div>

Answer 2

Если у вас есть контроль над размерами вашего section с, вы можете использовать контейнер фиксированной ширины и floatsection внутри этого. Очистите float в четвертом разделе.

Пример Fiddle: http://jsfiddle.net/abhitalks/mbuf9957/3/

Пример сниппета:

* { box-sizing: border-box; padding: 0; margin:0; } 
 
div { width: 380px; overflow: hidden; } 
 
section { border: 1px solid #666; float: left; } 
 
section:nth-child(1) { width: 240px; height: 240px; } 
 
section:nth-child(2) { width: 120px; height: 120px; } 
 
section:nth-child(3) { width: 120px; height: 120px; } 
 
section:nth-child(4) { width: 120px; height: 120px; clear: left; } 
 
section:nth-child(5) { width: 240px; height: 120px; }

<div> 
 
    <section>1</section> 
 
    <section>2</section> 
 
    <section>3</section> 
 
    <section>4</section> 
 
    <section>5</section> 
 
</div>

Answer 3

Так как вы отметили это как CSS3, я думаю Flexbox будет вариант. Вы можете установить display:flex на родителя, а затем процентную ширину для каждого окна flex-basis и установить свойство flex-grow на количество мест относительно других ящиков, вы хотите, чтобы они заняли в контейнере и установили flex-shrink в 0, чтобы они сокращались.

CSS/HTML:

.grid-system { 
 
    /* Uncomment the next line to see the container */ 
 
    /* border:1px solid black; */ 
 
} 
 
.grid-system .box-width-2 { 
 
    border:1px solid black; 
 
    -webkit-flex:2 0 65%; 
 
    flex: 2 0 65%; 
 
} 
 
.grid-system .box-width-1 { 
 
    border:1px solid black; 
 
    -webkit-flex:1 0 32%; 
 
    flex: 1 0 32%; 
 
} 
 
.grid-system .box-height-2 { 
 
    -webkit-flex-grow:2; 
 
    flex-grow:2; 
 
} 
 
.grid-system .box-height-1 { 
 
    -webkit-flex-grow:1; 
 
    flex-grow:1; 
 
} 
 
.grid-system .flex-row { 
 
    display:-webkit-flex; 
 
    display:flex; 
 
    -webkit-flex-flow:row nowrap; 
 
    flex-flow:row nowrap; 
 
    -webkit-justify-content:flext-start; 
 
    justify-content:flex-start; 
 
} 
 
.grid-system .flex-column { 
 
    display:-webkit-flex; 
 
    display:flex; 
 
    -webkit-flex-flow:column nowrap; 
 
    flex-flow:column nowrap; 
 
    width:32%; 
 
} 
 
.grid-system .flex-row > div { 
 
    margin:0.5% 
 
} 
 
.grid-system .box-width-1.box-height-1 { 
 
    margin-bottom:0.5%; 
 
    -webkit-flex-grow:1; 
 
    flex-grow:1; 
 
} 
 
.grid-system .box-width-1.box-height-1.end { 
 
    margin-bottom:0px; 
 
}

<div class="grid-system"> 
 
    <div class="flex-row"> 
 
     <div class="box-width-2 box-height-2">1</div> 
 
     <div class="flex-column"> 
 
      <div class="box-width-1 box-height-1">2</div> 
 
      <div class="box-width-1 box-height-1 end">3</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="box-width-1">4</div> 
 
     <div class="box-width-2">5</div> 
 
    </div> 
 
</div>

jsFiddle