Gift Giving Templates

[thisismanx]

There's a note!

Howdy pardner,

I hope you enjoy this code. (And be sure to visit Jenny if you want to add this cute card!)

♥, Manx!

And in the spirit of further procrastination, here's a bunch of gift giving code templates that utilize CSS Grid.

If you want to use the code as-is, simply pick a template and replace the IMG# with the image urls of your gifts. Images can be any size and the code will fit them nicely in the box.

For more advanced users, the code is very flexible about sizes. For all of the templates, columns are split evenly based on the defined max-width of the first div while row heights are defined directly in the grid settings.

For the actual card contents, you can paste Jenny's super cute stationary code where it says 'This is where the card content goes!' and it looks absolutely adorable. (As shown above.) Colourlovers is a great resource for patterns.

One Gift @ 600x250

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:250px 1fr;grid-template-areas:'one one' 'two two'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px;"></div> <div style="grid-area:two;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Two Gifts @ 300x250

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:250px 1fr;grid-template-areas:'one two' 'three three'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 0px 0px 10px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 10px 10px 0px;"></div> <div style="grid-area:three;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Two Gifts @ 600x200

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 1fr;grid-template-areas:'one one' 'two two' 'three three'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 10px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 0px 10px 10px;"></div> <div style="grid-area:three;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

One Gift @ 600x250, Two Gifts @ 300x150

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:250px 150px 1fr;grid-template-areas:'one one' 'two three' 'four four'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 10px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 0px 0px 10px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 0px 10px 0px;"></div> <div style="grid-area:four;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Three Gifts @ 200x200

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:200px 1fr;grid-template-areas:'one two three' 'four four four'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 0px 0px 10px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 0px 0px 0px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 10px 10px 0px;"></div> <div style="grid-area:four;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

One Gift @ 600x250, Three Gifts @ 200x150

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:250px 150px 1fr;grid-template-areas:'one one one' 'two three four' 'five five five'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 10px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 0px 0px 10px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 0px 0px 0px;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;border-radius:0px 0px 10px 0px;"></div> <div style="grid-area:five;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Four Gifts @ 300x200

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 1fr;grid-template-areas:'one two' 'three four' 'five five'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 0px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 10px 0px 0px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 0px 0px 10px;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;border-radius:0px 0px 10px 0px;"></div> <div style="grid-area:five;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Two Gifts @ 300x200, Three Gifts @ 200x200

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:200px 200px 1fr;grid-template-areas:'one one one two two two' 'three three four four five five' 'six six six six six six'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 0px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 10px 0px 0px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 0px 0px 10px;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;border-radius:0px 0px 0px 0px;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;border-radius:0px 0px 10px 0px;"></div> <div style="grid-area:six;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Six Gifts @ 200x200

There's a note!

This is where the card content goes!

<lj-raw> <div style="max-width:600px;margin:0 auto;"> <div style="padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:200px 200px 1fr;grid-template-areas:'one two three' 'four five six' 'seven seven seven'; grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;border-radius:10px 0px 0px 0px;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;border-radius:0px 0px 0px 0px;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;border-radius:0px 10px 0px 0px;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;border-radius:0px 0px 0px 10px;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;border-radius:0px 0px 0px 0px;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;border-radius:0px 0px 10px 0px;"></div> <div style="grid-area:seven;"><details><summary style="padding:10px 10px 10px 10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;font-size:18px;text-transform:uppercase;">There's a note!</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">This is where the card content goes!</div></details></div></div></div> </lj-raw>

Comments

[ollinsong]

OH NO this is all so cute~

[thisismanx]

THANK YOU!!! :D ♥