динамическая компоновка с разной высотой, но в шаблоне
Я не уверен, возможно ли это, но я пытаюсь создать макет примерно так:
Элементы <div>с текстом внутри, из PHP foreach петля.
При извлечении из базы данных, есть if условно, что можно добавить класс, где я могу контролировать ширину / высоту элемента. Это сделает элемент больше.
Я посмотрел в CSS Grid & Flexbox, и не вижу решения. Количество больших полей может меняться от страницы к странице, но всегда должно быть одинаковым.
Мне интересно, будет ли лучшим решением как-то переставить массив в PHP, чтобы переупорядочить вывод элементов.
Решение
надеюсь помочь вам
var row=5; // total row layout
var count=0;
var strLayout='';
for(var i=0;i<row*2;i++){
if(count%3==0){
strLayout +='<div style="float:left;width:100px;height:100px;"><div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>';
strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>';
strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>';
strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div></div>';
}else{
strLayout +='<div style="float:left;width:90px;height:90px;margin: 5px;background:black"></div>';
}
if (count==3){
count=0;
}else{
count++;
}
}
$('#layout').html(strLayout);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="layout" style="float:left;width:200px;background:white">
</div>Другие решения
Я действительно пытался найти решение для этого с помощью CSS Grid, но, к сожалению, я пришел только к тем возможностям, которые не делают все это динамичным, как вы могли бы хотеть. Но я думаю, что в настоящее время нет других вариантов — если кто-то знает способ, пожалуйста, поправьте меня. 😉
Насколько мне известно, в css в настоящее время также нет селектора, который позволял бы точно адресовать каждый второй элемент. класса, что, к сожалению, делает его более сложным.
В моем первом решении я основывался на :nth-child(even) селектор. Для этого подхода элемент с классом, к которому вы хотите обратиться, должен быть в правильном порядке по отношению к родительскому элементу, чтобы индекс был правильным. Таким образом, вам придется настроить код PHP так, чтобы более крупные элементы уже попадали в нужное место в выводе HTML.
Для второго решения (который мне нравится гораздо меньше), Я пытался построить все это на общий брат и сестра комбинатор селектор. С этим я обращаюсь ко всем существующим элементам на странице индивидуально как: .class ~ .class = второй элемент или же .class ~ .class ~ .class = третий элемент. В результате код PHP не нужно будет корректировать, и вы получите «больше гибкости» в этой части, но вы будете ограничены в количестве элементов на странице, так как настройки для них будут зафиксированы в коде CSS.
Вот теперь два решения:
1. :nth-child(even) путь
.grid {
display: grid;
height: 100%;
width: 100%;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-gap: 20px;
grid-auto-flow: row dense;
}
.grid__item--large {
grid-column: -3 / span 2;
grid-row: span 2;
}
.grid__item--large:nth-child(even) {
grid-column: 1 / span 2;
}
/* just for the snippet styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 20px;
}
.grid__item {
min-height: 200px;
background: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: white;
}
.grid__item--large {
min-height: 400px;
}
/* --- */<div class="grid">
<div class="grid__item grid__item--large">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item grid__item--large">6</div>
<div class="grid__item">7</div>
<div class="grid__item">8</div>
<div class="grid__item">9</div>
<div class="grid__item">10</div>
<div class="grid__item grid__item--large">11</div>
<div class="grid__item">12</div>
<div class="grid__item">13</div>
<div class="grid__item">14</div>
<div class="grid__item">15</div>
<div class="grid__item grid__item--large">16</div>
<div class="grid__item">17</div>
<div class="grid__item">18</div>
<div class="grid__item">19</div>
<div class="grid__item">20</div>
</div>2. The «общий брат и сестра» путь
.grid {
display: grid;
height: 100%;
width: 100%;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-gap: 20px;
grid-auto-flow: row dense;
}
.grid__item--large {
grid-column: -3 / span 2;
grid-row: span 2;
}
.grid__item--large ~ .grid__item--large {
grid-column: 1 / span 2;
}
.grid__item--large ~ .grid__item--large ~ .grid__item--large {
grid-column: -3 / span 2;
}
.grid__item--large ~ .grid__item--large ~ .grid__item--large ~ .grid__item--large {
grid-column: 1 / span 2;
}
/* just for the snippet styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 20px;
}
.grid__item {
min-height: 200px;
background: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: white;
}
.grid__item--large {
min-height: 400px;
}
/* --- */<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item grid__item--large">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item grid__item--large">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
<div class="grid__item">8</div>
<div class="grid__item">9</div>
<div class="grid__item grid__item--large">10</div>
<div class="grid__item">11</div>
<div class="grid__item">12</div>
<div class="grid__item">13</div>
<div class="grid__item">14</div>
<div class="grid__item">15</div>
<div class="grid__item grid__item--large">16</div>
<div class="grid__item">17</div>
<div class="grid__item">18</div>
<div class="grid__item">19</div>
<div class="grid__item">20</div>
</div>Я надеюсь, что это может как-то помочь. 🙂