Search code examples
htmlcssgridcss-gridgrid-layout

CSS complex grid auto layout

I am making a website with unknown number of cells in the layout and I would like to make the styles with CSS only.

My idea was using CSS grid, but is there a way of using it in a the manner shown on the image? I was thinking some kind of :nth-child kind of stuff? The number of "sections" (each 4 squares tall in this scenario) is always three in a row, but unknown number of rows.

I came up with this, but it puts the fourth section onto #1; and it does not work with unknown number of sections/rows.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, [img-start] 200px [img-end basic-start] 200px [basic-end me-start] auto [me-end why-start] auto [why-end]);
    justify-content: center;
    align-items: center;
}
.container div:nth-child(12n-11), .container div:nth-child(12n-10), .container div:nth-child(12n-9), .container div:nth-child(12n-8) {
    grid-column: 1;
}
.container div:nth-child(12n-7), .container div:nth-child(12n-6), .container div:nth-child(12n-5), .container div:nth-child(12n-4) {
    grid-column: 2;
}
.container div:nth-child(12n-3), .container div:nth-child(12n-2), .container div:nth-child(12n-1), .container div:nth-child(12n) {
    grid-column: 3;
}

.container div:nth-child(4n-3) {
    grid-row: img;
}
.container div:nth-child(4n-2) {
    grid-row: basic;
}
.container div:nth-child(4n-1) {
    grid-row: me;
}
.container div:nth-child(4n) {
    grid-row: why;
}
<div class="container">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<div>div11</div>
<div>div12</div>
</div>

css grid layout

Solution

  • You can try something like below:

    .container {
  display: grid;
  grid-auto-flow:dense; /* don't leave any empty cell */
  grid-auto-rows:50px; /* 50px for each row */
  grid-auto-columns:1fr; /* 1fr for each column */
  counter-reset:num;
}
.container > * {
  grid-column:1; /* all of them in the first column by default*/
}

.container > *:nth-child(12n + 5),
.container > *:nth-child(12n + 6),
.container > *:nth-child(12n + 7),
.container > *:nth-child(12n + 8) {
  grid-column:2; /* 2nd column from 5 to 8*/
}
.container > *:nth-child(12n + 9),
.container > *:nth-child(12n + 10),
.container > *:nth-child(12n + 11),
.container > *:nth-child(12n + 12) {
  grid-column:3; /* 3rd column from 9 to 12 */
}

.container > *::before {
  content:counter(num);
  counter-increment:num;
  font-size:30px;
}
    <div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>