moodboard: essentially

[transilience]

these are real basic and mostly just an excuse to throw together these examples, but! some people like basic!

 

 

 

 

 

 

 

 

copy & paste

- works in Firefox, Chrome, Opera, and Edge. does not work in Explorer.
- the areas are color-coded to help you remember what goes where.
- you can change the background-color properties when you're done, if you want to; I recommend you do NOT change grid-area or grid-template-areas
- if you're confused now, don't worry about it, just plug in your image URLs and you're good

pilot (portrait)

partisan (landscape)

<div style="box-sizing: border-box; display: grid; grid-template-columns: 50% auto; grid-template-rows: 25% auto auto auto; grid-template-areas: 'red orange' 'red yellow' 'green yellow' 'green blue'; grid-gap: 5px; width: 500px; height: 700px; background-color: #fff; margin: 2em auto; padding: 5px; "> <div style="box-sizing: inherit; grid-area: red; background: red url(IMGURL) center; background-size: cover;"> <img src="IMGURL" style="background: purple center; width: 225px; height: 155px; object-fit: cover; transform:rotate(7deg); border: 5px #fff solid; position: relative; top: 250px; left: 75px;"> </div> <div style="box-sizing: inherit; grid-area: orange; background: orange url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: green; background: green url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: blue; background: blue url(IMGURL) center; background-size: cover;"> &nbsp; </div> </div> <div style="box-sizing: border-box; display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 50% 50%; grid-template-areas: 'red orange orange yellow' 'green green blue blue'; grid-gap: 5px; width: 700px; height: 500px; background-color: #fff; margin: 2em auto; padding: 5px; "> <div style="box-sizing: inherit; grid-area: red; background: red url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: orange; background: orange url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: green; background: green url(IMGURL) center; background-size: cover;"> &nbsp; </div> <div style="box-sizing: inherit; grid-area: blue; background: blue url(IMGURL) center; background-size: cover;"> <img src="IMGURL" style="background: purple center; width: 150px; height: 200px; object-fit: cover; border: 5px #fff solid; position: relative; top: -100px; left: 0px; transform: rotate(12deg);"> </div> </div>

Comments

[thisismanx]

oh i have been wondering how to do something like this. i love them!

[transilience]

yay I'm glad! CSS grids are frickin' amazing, I tell you what.

[thisismanx]

no kidding!!! i want to make everything into grids now!! but i love the break-out image. that's a really neat trick!!

[transilience]

thanks! pretty sure I stole that from tess, ahahaha.