After avoiding HTML/CSS for a long time, I finally decided to dive in and create a simple CSS grid website with 3 items in the grid. Everything was working well and looking exactly as I wanted it to:
https://i.sstatic.net/zVQ9U.jpg
However, I had the idea of using the entire Aside-Items section as a hyperlink. So, I wrapped a href= around it, but then the same CSS ended up looking like this:
https://i.sstatic.net/jluUP.jpg
My questions are:
- How can I achieve the look from the first picture while making the "Aside-GridItem" function as a hyperlink?
- Is this approach acceptable, or will I face SEO issues by "hiding" the link with text-decoration: none?
Here is my code snippet:
.gridwrapper{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 3fr;
grid-column-gap: 1px;
background-color: wheat;
gap: 5px;
}
.gridHeader{
background-color:blueviolet;
font-family: Helvetica, sans-serif;
font-size: 32px;
padding: 1em;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.gridContent{
background-color:blue;
font-family: Helvetica, sans-serif;
font-size: 32px;
padding: 1em;
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.gridAside{
background-color:goldenrod;
font-family: Helvetica, sans-serif;
font-size: 32px;
padding: 1em;
grid-row: 1 / 3;
grid-column: 2 / 3;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>BlazorFK</title>
</head>
<body>
<div class="gridwrapper">
<div class="gridHeader">HEADER</div>
<div class="gridContent">...content...</div>
<a href="https://google.com" style="text-decoration: none;">
<div class="gridAside">Aside</div>
</a>
</div>
</body>
<script></script>
</html>