thisismanx | Three Grid-Based Aesthetic Boards

Skip to Main Content

Entry tags:

Three Grid-Based Aesthetic Boards

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>

Flat | Top-Level Comments Only

You are a gift

Look at all the things there are to do that isn't reading about accounting.

oh, this is WONDERFUL! thank you so much for sharing! bookmarking for later use.

glad you like it!!! ♥

The first one is so good! I love that there's a colour palette section for the first one since I'm sucker for those in aesthetic graphics but didn't know how to do that myself. ; v ;

Thank you for sharing this! Going to use it for my characters in the future.

thank you!!! happy to share resources :))) ♥

brain tired, good work 👌

Flat | Top-Level Comments Only