How to Repeat a CSS Grid Layout Pattern

How to repeat a CSS grid layout pattern?

You may consider many grid container that you repeat like below:

.container {  max-width: 940px;  margin: 0 auto;  counter-reset: div;}
.grid-container {  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-auto-rows: 100px;  grid-gap: 20px;  margin-bottom:20px;}.grid-container:nth-child(2n+1) {  grid-template-areas:   "v1 v2 h1 h1"   "v1 v2 h2 h2"}.grid-container:nth-child(2n) {  grid-template-areas:   "v1 v1 h1 h2 "   "v2 v2 h1 h2 "}
.item-a {  grid-area: v1;}
.item-b {  grid-area: v2;}
.item-c {  grid-area: h1;}
.item-d {  grid-area: h2;}
.grid-container>div {  box-shadow: 0 0 11px 0 #b9b9b9;}
.grid-container>div:before {  counter-increment: div;  content: counter(div);  font-size: 40px;}

<div class="container">  <div class="grid-container">    <div class="item-a"></div>    <div class="item-b"></div>    <div class="item-c"></div>    <div class="item-d"></div>  </div>  <div class="grid-container">    <div class="item-a"></div>    <div class="item-b"></div>    <div class="item-c"></div>    <div class="item-d"></div>  </div>  <div class="grid-container">    <div class="item-a"></div>    <div class="item-b"></div>    <div class="item-c"></div>    <div class="item-d"></div>  </div>  <div class="grid-container">    <div class="item-a"></div>    <div class="item-b"></div>    <div class="item-c"></div>    <div class="item-d"></div>  </div>  <div class="grid-container">    <div class="item-a"></div>    <div class="item-b"></div>    <div class="item-c"></div>    <div class="item-d"></div>  </div>
</div>

CSS Grid Repeat Pattern Issue

Using a little bit of a trick, I have achieved your desired layout on a basic HTML.

I have changed the color of the critical items so that they are easier to track

.grid {  width: 200px;  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-auto-rows: 50px;  grid-column-gap: 5px;  grid-row-gap: 5px;  grid-auto-flow: dense;  transform: rotateY(180deg);}
.cell {  background: tomato;  width: 100%;  height: 100%;  transform: rotateY(180deg);}
.cell:nth-child(10n + 1) {  background: lightgreen;  grid-column: span 2;  grid-row: span 2;
}
.cell:nth-child(10n + 10) {  background: lightblue;  grid-column: span 2;  grid-row: span 2;
}
.cell:nth-child(10n + 8) {  background: yellowgreen;  grid-column: 1;}
.cell:nth-child(10n + 9) {  background: yellow;  grid-column: 2;}

<div class="grid">  <div class="cell">1</div>  <div class="cell">2</div>  <div class="cell">3</div>  <div class="cell">4</div>  <div class="cell">5</div>  <div class="cell">6</div>  <div class="cell">7</div>  <div class="cell">8</div>  <div class="cell">9</div>  <div class="cell">10</div>  <div class="cell">11</div>  <div class="cell">12</div>  <div class="cell">13</div>  <div class="cell">14</div>  <div class="cell">15</div>  <div class="cell">16</div>  <div class="cell">17</div>  <div class="cell">18</div>  <div class="cell">19</div>  <div class="cell">20</div>  <div class="cell">21</div>  <div class="cell">22</div>  <div class="cell">23</div></div>

Repeating grid layout with unknown amount of items

Simply like below:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* fr instead of % */
  grid-auto-rows: 120px 120px 120px 240px; /* auto-rows instead of template-rows */
  grid-auto-flow: dense; /* fill all the space */
  gap: 8px;
}

.item {
  background: #bada55;
}

.item:nth-child(6n + 1) {
  grid-row: span 2; /* I will take 2 rows */
}

.item:nth-child(6n + 4) {
  grid-column: 1/-1; /* I will take all the columns  */
}

<div class="wrapper">
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
</div>

Repeat two rows pattern in CSS Grid

You can rely on nth-child selector to do this. Note how the pattern is repeating each 4 elements.

#parent {  display: grid;  grid-template-columns: 35% 1fr 35%;  grid-gap: 24px;}
.child {  height: 150px;  background-color: #DDD;}.child:nth-child(4n+1),.child:nth-child(4n+4){  grid-column:span 2;}

<div id="parent">  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div></div

CSS Grid - repeatable grid-template-areas

grid-templates-areas overides the grid-template-rows & -columns. You have to choose, one or the other way to describe your grid layout.

For a repeating pattern, you can use :nth-child(n) and reset the spanning values : ( https://codepen.io/gc-nomade/pen/qVdpwL ) or snippet below

.grid {  width: 1000px;  margin: 0 auto;  display: grid;  grid-gap: 25px;  grid-template-columns: repeat(4, 1fr);  grid-auto-rows: 200px;  padding: 10px;  counter-reset:div}.item:nth-child(6n + 4),.item:nth-child(6n + 1) {  grid-column: auto /span 2;  grid-row: auto /span 2;}.item {  border: solid;  display:flex;}.item:before {  counter-increment:div;  content:counter(div);  margin:auto;  font-size:40px;}

<div class="grid">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

How to make a repeating css grid pattern with elements swapping places?

try this

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.grid div:nth-child(3n+3) {
  grid-column: span 2;
}

.first-variation div:nth-child(3n+1) {
  grid-column: 2;
}

.second-variation div:nth-child(6n+4) {
  grid-column: 2;
}

/* only for testing */
.grid div:nth-child(3n+1)::before {
  content: 'A';
  color: red;
}

.grid div:nth-child(3n+2)::before {
  content: 'B';
  color: blue;
}

.grid div:nth-child(3n+3)::before {
  content: 'C';
  color: green;
}

div {
  text-align: center;
  padding: 8px;
  outline: 1px solid;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid first-variation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid second-variation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

---

Related Topics