There is this fun and functional link box grid added on the homepage view of my template, inspired by the Kadence theme used on the K2Blogger website homepage. It’s a simple and stylish way to showcase various pages or services with icons and links. Here's how to implement it on your own site!
Step 1: HTML Structure
First, you need to add the HTML structure for the link boxes. Here’s the code for the link grid:
<div class='link-box-grid'>
<a href='https://www.yoursite.com/page1' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-hdd-o'></i>
</span> Contents
</a>
<a href='https://www.yoursite.com/page2' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-shopping-cart'></i>
</span> Store
</a>
<a href='https://www.yoursite.com/page3' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-wrench'></i>
</span> Services
</a>
<a href='https://www.yoursite.com/page4' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-address-card'></i>
</span> About
</a>
<a href='https://www.yoursite.com/page5' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-link'></i>
</span> Links
</a>
<a href='https://www.yoursite.com/page6' class='link-box'>
<span class='link-box-icon'>
<i class='fa fa-money'></i>
</span> Support
</a>
</div>
This HTML creates a series of link boxes with icons, and you can customize the links and icons as needed.
Step 2: CSS Styling
Now, you need the CSS to style the link boxes and make the layout responsive. Here’s the CSS that will make the link boxes display in a neat grid and adjust for different screen sizes:
/* Link Box Grid Layout */
.link-box-grid {
width: 90%;
margin: 0 auto;
column-count: 3;
-moz-column-count: 3;
}
.link-box {
margin-left: -40px;
}
.link-box-icon {
margin-right: 10px;
width: 40px;
height: 40px;
overflow: hidden;
padding: 5px;
}
.link-box-icon i {
font-size: 40px;
}
.link-box-grid a {
height: 100px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 8px;
background: transparent;
letter-spacing: 2px;
border-color: #006161;
z-index: 1;
overflow: hidden;
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #006161;
padding-top: 1rem;
padding-right: 1.875rem;
padding-bottom: 1rem;
padding-left: 1.875rem;
transition: 0.3s ease-in-out;
border-width: 3px;
border-bottom-width: 5px;
border-right-width: 5px;
border-style: solid;
font-weight: 700;
text-align: center;
background-size: 100% 200%;
background-image: linear-gradient(180deg, transparent 50%, #006161 0);
transition: background-position .5s ease, color .5s ease;
padding: .75rem 0;
cursor: pointer;
}
/* Hover Effect */
.nightmode .link-box-grid a:hover, .link-box-grid a:hover {
color: #fff !important;
background-position: 0 100%;
transition: background-position .5s ease, color .5s ease;
}
/* Centering Text */
.t-center {
text-align: center;
}
/* Responsive Design for Mobile */
@media screen and (max-width: 767px) {
.link-box-grid {
width: 90%;
column-count: 1;
}
}
Step 3: Final Touches
After adding this HTML and CSS, you’ll have a responsive link grid with icons. The grid will adapt for mobile screens, displaying the links in a single column for smaller devices.
Update: Compact and Optimized for Mobile!
After using this layout for a while, I realized that the original design wasn’t as compact as I wanted it to be, especially on mobile. I got tired of the extra scrolling and wanted to make the layout more user-friendly on smaller screens. So, I redesigned the CSS to be more compact and streamlined.
The New Compact CSS
Here’s the updated CSS with a more compact layout, making it easier to navigate on mobile devices without excessive scrolling:
/* Updated Compact and Responsive Layout */
.link-box-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
max-width: 900px;
margin: 10px auto;
padding: 0 10px;
}
.link-box {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
text-decoration: none;
color: #006161;
border: 2px solid #006161;
font-weight: 700;
letter-spacing: 1px;
transition: all 0.3s ease;
background: linear-gradient(180deg, transparent 50%, #006161 0);
background-size: 100% 200%;
font-size: 0.9em;
}
/* Hover Effect */
.link-box:hover {
color: #fff !important;
background-position: 0 100%;
}
.link-box-icon {
margin-right: 8px;
display: flex;
align-items: center;
font-size: 20px;
}
/* Responsive Design for Smaller Screens */
@media screen and (max-width: 768px) {
.link-box-grid {
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 0 5px;
}
.link-box {
padding: 8px;
font-size: 0.8em;
}
.link-box-icon {
margin-right: 4px;
font-size: 16px;
}
}
What Changed?
- Grid Layout: I switched from using column-based layout to CSS Grid for better control over the arrangement of items.
- More Compact Design: The new design reduces padding and margins, making the link boxes take up less space and making everything more compact.
- Better Mobile Optimization: The media query was adjusted to reduce unnecessary scrolling on smaller screens, so the grid looks better on mobile devices.
That's All
I hope this helps anyone who wants to add a link grid to their website! The original design worked great, but I wanted a more compact layout, especially for mobile. With this updated CSS, the layout looks cleaner and is more responsive.
If you prefer the more spacious design, feel free to stick with the original CSS. Otherwise, give the new compact version a try for a more mobile-friendly experience!
Feel free to adjust the design to match your site’s branding and color scheme. Adding this will not only improve navigation but also enhance the look and feel of your website.
You can also minify the code provided to make it more lighter.
