[44] Grid Navigations

[lina_trinch]

Image on Top Right:
<div style="display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 500px; height: 250px; margin: auto; text-align: center; font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: bold; font-size: 13px;"> <!--image--> <div style="grid-area: 1 / 3 / 4 / 5; background: center/cover url('IMAGE_URL'), silver; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"></div> <!--links--> <a href="URL" style="grid-area: 1 / 1 / 2 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 2 / 2 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 1 / 3 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 2 / 3 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 1 / 4 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 2 / 4 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 1 / 5 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 3 / 5 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 4 / 5 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> </div><br /><br /><br /><br />

Image on Top Left:
<div style="display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 500px; height: 250px; margin: auto; text-align: center; font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: bold; font-size: 13px;"> <!--image--> <div style="grid-area: 1 / 1 / 4 / 3; background: center/cover url('IMAGE_URL'), silver; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"></div> <!--links--> <a href="URL" style="grid-area: 1 / 3 / 2 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 4 / 2 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 3 / 3 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 4 / 3 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 4 / 4 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 1 / 5 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 3 / 5 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 4 / 5 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> </div><br /><br /><br /><br />

Image on Bottom Right:
<div style="display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 500px; height: 250px; margin: auto; text-align: center; font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: bold; font-size: 13px;"> <!--image--> <div style="grid-area: 2 / 3 / 5 / 5; background: center/cover url('https://i.pinimg.com/originals/8b/8f/6f/8b8f6fbe3dac317446e500cdef5d5921.gif'), silver; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"></div> <!--links--> <a href="URL" style="grid-area: 1 / 1 / 2 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 2 / 2 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 3 / 1 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 4 / 1 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 1 / 3 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 2 / 3 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 1 / 4 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 2 / 4 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 1 / 5 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> </div><br /><br /><br /><br />

Image on Bottom Left:
<div style="display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 500px; height: 250px; margin: auto; text-align: center; font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: bold; font-size: 13px;"> <!--image--> <div style="grid-area: 2 / 1 / 5 / 3; background: center/cover url('https://images.gr-assets.com/hostedimages/1560188455ra/27647465.gif'), silver; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"></div> <!--links--> <a href="URL" style="grid-area: 1 / 1 / 2 / 2; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 2 / 2 / 3; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 3 / 1 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 1 / 4 / 1 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 3 / 3 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 2 / 4 / 3 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 3 / 4 / 4 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 3 / 5 / 4; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> <a href="URL" style="grid-area: 4 / 4 / 5 / 5; background: silver; padding: 18% 0; color: #000; text-decoration: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> link </a> </div><br /><br /><br /><br />

❖ This is another code released early on the Patreon to my subscribers. Thank you! ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ So, as you can see, there are four codes here! They're separated based on where the image is placed. You can see an example of each in the images above. Ctrl+F & Replace: ❖ IMAGE_URL - url for images ❖ URL - link urls ❖ link - names of links silver background of all the boxes as a placeholder #000 link text rgba(0,0,0,0.5) inset box shadows

Comments

[wickedlittletown]

I love this code so much and finally I have found the time to use it.
Used it for the overview entries for the fills for various writing communities.

Added a line of credit in each entry ^^

Thank you for sharing this code

[lina_trinch]

Aw, thank you! I'm glad you've got a use for it. ♥♥

[wickedlittletown]

You're welcome ^.^

It's a code I have always looked for but never found: simple and easy to use. And the different positions for the picture adds great variety.