I'm experimenting with CSS grid to organize content within certain limitations.
My goal is to have three divs, each 50% wide, with div two and three stacking next to div one.
To accomplish this dynamically using PHP, I utilized grid-template-areas. However, the number of divs may vary, so I want the grid to repeat if necessary.
This is the current code snippet I am working with:
.container {
display: grid;
grid-template-columns: 50% 50% 50%;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"Grid-1 Grid-2 ."
"Grid-1 Grid-3 ."
". . .";
}
.Grid-2 { grid-area: Grid-2; }
.Grid-3 { grid-area: Grid-3; }
.Grid-1 { grid-area: Grid-1; }
html, body , .container {
height: 100%;
margin: 0;
}
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="Grid-1"></div>
<div class="Grid-2"></div>
<div class="Grid-3"></div>
</div>
I am also looking for a way to avoid assigning specific area classes to each dynamically generated div in PHP. Can this be achieved with grid templates?