Three Grid-Based Aesthetic Boards

[thisismanx]

Today's procrastination brings three aesthetic boards adapted from code originally written by tessisamess using CSS Grid -- it's all pretty well skimmed down to basic code at this point, but I wouldn't have figured this out without her!

All three are replicating layouts found on Pinterest and adjusting the height and width of the container divs can dramatically change the shape of the layouts.

I only have one of these fully styled - the latter two were proofs of concept - so I linked the original inspirations to give an idea of how the designer intended the spaces to be used! The first one is also the only one with the additional outer border but that's easy to add or remove by looking at the code.

Grid #1 (inspiration)

<lj-raw><div style="max-width:650px;margin:0 auto;border:1px solid #eee;"> <div style="background:#fff;height:550px;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);grid-template-areas:'one one one two two two three three' 'one one one two two two three three' 'one one one four four five-one three three' 'seven seven seven four four five-two six six' 'seven seven seven four four five-three six six' 'seven seven seven eight eight eight nine nine' 'seven seven seven eight eight eight nine nine' 'ten ten ten ten ten ten nine nine';grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-one;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-two;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-three;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;"></div> <div style="background:#eee url(IMG7)center;background-size:cover;grid-area:seven;"></div> <div style="background:#eee url(IMG8)center;background-size:cover;grid-area:eight;"></div> <div style="background:#eee url(IMG9)center;background-size:cover;grid-area:nine;"></div> <div style="background:#eee url(IMG10)center;background-size:cover;grid-area:ten;"></div> </div> </div></lj-raw>

Grid #2 (inspiration)

<lj-raw><div style="max-width:600px;margin:0 auto;"> <div style="height:840px;padding:10px;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(15,1fr);grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;grid-column-start:2;grid-column-end:9;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;grid-column-start:9;grid-column-end:13;grid-row-start:1;grid-row-end:5;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;grid-column-start:9;grid-column-end:13;grid-row-start:5;grid-row-end:8;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;grid-column-start:13;grid-column-end:14;grid-row-start:1;grid-row-end:6;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;grid-column-start:13;grid-column-end:14;grid-row-start:6;grid-row-end:12;"></div> <div style="background:#eee url(IMG7)center;background-size:cover;grid-area:seven;grid-column-start:1;grid-column-end:2;grid-row-start:8;grid-row-end:16;"></div> <div style="background:#eee url(IMG8)center;background-size:cover;grid-area:eight;grid-column-start:2;grid-column-end:7;grid-row-start:8;grid-row-end:12;"></div> <div style="background:#eee url(IMG9)center;background-size:cover;grid-area:nine;grid-column-start:7;grid-column-end:13;grid-row-start:8;grid-row-end:12;"></div> <div style="background:#eee url(IMG10)center;background-size:cover;grid-area:ten;grid-column-start:2;grid-column-end:11;grid-row-start:12;grid-row-end:16;"></div> <div style="background:#eee url(IMG11)center;background-size:cover;grid-area:eleven;grid-column-start:11;grid-column-end:14;grid-row-start:12;grid-row-end:16;"></div> </div> </div></lj-raw>

Grid #3 (inspiration)

<lj-raw><div style="max-width:600px;margin:0 auto;"> <div style="height:840px;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(10,1fr);;grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;grid-column-start:1;grid-column-end:4;grid-row-start:1;grid-row-end:5;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;grid-column-start:4;grid-column-end:6;grid-row-start:1;grid-row-end:3;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;grid-column-start:4;grid-column-end:6;grid-row-start:3;grid-row-end:6;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;grid-column-start:1;grid-column-end:4;grid-row-start:5;grid-row-end:10;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;grid-column-start:4;grid-column-end:6;grid-row-start:6;grid-row-end:10;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;grid-column-start:1;grid-column-end:6;grid-row-start:10;grid-row-end:11;"></div> </div> </div></lj-raw>