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

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>

Answer 2

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

See the example below:

 .wrapper { display: grid; grid-template-areas: "abd" "a c d" "egh" "fgi"; 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