I want to create clickable tiles for a content area. To realize this I wanted to use CSS Grid and make the individual areas clickable.
<!DOCTYPE html>
<head>
<style class="cp-pen-styles">
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
</body>
</html>
I understand that I could put a link in the individual cells, but maybe it is possible to click the single cell as a whole ?
A JS solution that uses no anchors:
Now you can use
display: flex
to each individual box to arrange it's inner content.