I am making a gallery of images, which I show them with a foreach loop and ordering them with css grid, the problem is that I cannot use order, grid-column, grid-row or grid-area to go back one box or move it from position to a previous one, so if I want to enlarge a checkbox or anything else with a pseudo css class for example :checked, it only lets me move it forward, why does that happen?
css
.container{
width: 100%;
display: grid;
grid-template-areas: 'left right';
grid-template-columns: repeat(2, 1fr);
grid-template-columns:450px;
grid-row-gap:0px;
grid-auto-flow: dense;
gap:0px;
}
.container input[type=checkbox].click:checked + .gallery {
order:1;
grid-area: left;
grid-column: 1;
}
reference html displayed with echo
foreach($data as $row){
echo '
<input type="checkbox"id="click"class="click">
<label for="click"class="gallery">
<div class="card"style="background-image: url(./images/gallery/'.$row["images"].');"
<div class="texts">
<h3 class="titlecard" style"::before">'.$row["title"]'</h3>
</div>
</div>
</label>
';
}
The CSS is the same, you don't have to touch it, maybe you should add the rule you want but no more than that; then the php and the sliders should be assembled more or less like this:
The idea is not to send the html to the output buffer until it has finished processing the information and assembling it correctly. to be able to apply css to the previous element, I do it by browsing with the index of the array; That is why I see the need to implement 2 foreach, one to assemble the data that will be used in the html, in a previous step, and the second to structure the final html that will be displayed.