CSS Grid - Repeatable Grid-Template-Areas

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>

Repeating CSS grid without defining more grid areas

Simply like below:

.container {
  display: grid;
  grid-template-columns: 50% 50%; /* 2 columns */
  grid-auto-rows:50vh; /* size of one row*/
}
/* for each 3 divs make the first one span 2 rows */
.container > :nth-child(3n + 1) { grid-row:span 2 }

.container * {
  border: 1px solid red;
  display: grid;
  place-items: center;
}

.container *:after {
  content:"some content";
}

body {
  margin: 0;
}

<div class="container">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

why wont grid-template-area work? everything should be set correctly

Your definition of the grid template areas is OK, but when you come to set the grid-area for an item you have used quotes which are not required.

.spaces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: "zero ... six seven eight" "one ... five ... nine" "two three four ... ten";
}

.zero {
  grid-area: zero;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.ten {
  grid-area: ten;
}

<div class="spaces">
  <div class="zero">0</div>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
  <div class="seven">7</div>
  <div class="eight">8</div>
  <div class="nine">9</div>
  <div class="ten">10</div>
</div>

How to repeat a grid-template-areas?

You can simplify like below. No need for grid-template-areas or grid-template-columns

.grid {

  margin: 0 auto;

  display: grid;

  grid-gap: 20px;

}

.grid > .item:nth-child(7n) {

  /* this will create 3 columns layout and force each 7th element to span all of them */

  grid-column:span 3; 

}

.item {

  background: red;

  border: 4px solid black;

  height: 20px;

}

<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>

How to stack unknown number of generic content items in a CSS Grid template area

You can approximate it like below:

body {
  margin: 0;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-flow: dense;
  gap: 0 40px; /* set only column gap */
}

.header {
  grid-row: 1;
  grid-column: 1/-1;
}

.graphic {
  grid-column: 2;
  grid-row: 2/ span 100; /* this will do the trick */
}

.container *:not(.graphic,:last-child) {
  margin-bottom: 40px; /* replace the row gap */
}

/* For presentation only, no need to copy the code below */

.container * {
  border: 1px solid red;
  position: relative;
  margin: 0;
}

<div class="container">
  <div class="header">Full-width title</div>
  <div class="graphic">Some Graphic here</div>
  <h4>Random element here</h4>
  <p>Random element here</p>
  <p>Random element here</p>
</div>

Creating a repeating CSS Grid layout

Don't define explicit area, only define the sizes and let the browser do the job for you

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-auto-flow:dense;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 150px; /* height of one row */
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1),
.grid-container > .item:nth-child(6n+6){
  grid-area: span 2/span 3; /* take 2 rows and 3 columns */
}

.grid-container > .item:nth-child(6n+2),
.grid-container > .item:nth-child(6n+3),
.grid-container > .item:nth-child(6n+4){
  grid-column: span 2; /* take 2 columns */
}

.grid-container > .item:nth-child(6n+5){
  grid-column: 1/span 2; /* take 2 columns and start at column 1*/
}

<div class="grid-container">
  <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>

---

Related Topics