CSS Complex Grid Layout

Question

I am looking to do the layout (image below), I want the HTML to follow the same format, as this will be pulling through dynamic content.

There are 2 rows here, the rows will then repeat to follow the design when more dynamic content is added.

I have tried using display:grid; and display:flex; but currently getting stuck on creating this correctly.

I have created this below and it works however for one row. I was wondering if there is a better way around it, or if anyone could provide any answers?

Codepen:- https://codepen.io/scottYg55/pen/VwwPqXB?&editable=true

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
}

.wrapper>div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

.wrapper>div:nth-of-type(4) {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  background: red;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Answer 1

why don't you try with the grid-template-areas?

See the example below:

.wrapper {
  display: grid;
  grid-template-areas:
    "a b d"
    "a c d"
    "e g h"
    "f g i";
  grid-auto-rows: 100px;
}

/* AREAS */
.wrapper div:nth-child(1) {
  grid-area: a;
}

.wrapper div:nth-child(2) {
  grid-area: b;
}

.wrapper div:nth-child(3) {
  grid-area: c;
}

.wrapper div:nth-child(4) {
  grid-area: d;
}

.wrapper div:nth-child(5) {
  grid-area: e;
}

.wrapper div:nth-child(6) {
  grid-area: f;
}

.wrapper div:nth-child(7) {
  grid-area: g;
}

.wrapper div:nth-child(8) {
  grid-area: h;
}

.wrapper div:nth-child(9) {
  grid-area: i;
}

/* COLORS */
.wrapper div:nth-child(3n + 1) {
  background-color: #2a30f1;
}

.wrapper div:nth-child(3n) {
  background-color: #b40000;
}

.wrapper div:nth-child(3n + 2) {
  background-color: #640000;
}

<div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>

this method also works in Internet Explorer 11 using autoprefixer

Answer 2

Your pattern repeat each 9 elements so you can try something like below where you consider nth-child(9n + x)

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* to fill all the empty cells */
  grid-auto-rows: 50px;
}

 /* 2 rows for 1 and 4 and 7*/
.wrapper > div:nth-child(9n + 1),
.wrapper > div:nth-child(9n + 4),
.wrapper > div:nth-child(9n + 7) {
  grid-row:span 2;
  background:red;
}

/* force the 3rd element on column 2*/
.wrapper > div:nth-child(9n + 3) {
 grid-column:2;
}

/* force the 6th element on column 1*/
.wrapper > div:nth-child(9n + 6) {
 grid-column:1;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
  color:#fff;
  font-size:2em;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>

You can also consider a pattern repeat each 3 elements and optimize the code like below:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* to fill all the empty cells */
  grid-auto-rows: 50px;
}

.wrapper > div:nth-child(3n + 1) {
  grid-row:span 2;
  background:red;
}

/* force the 3rd element on column 2*/
.wrapper > div:nth-child(9n + 3) {
 grid-column:2;
}

/* force the 6th element on column 1*/
.wrapper > div:nth-child(9n + 6) {
 grid-column:1;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
  color:#fff;
  font-size:2em;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>