Css Grid: How To Make Grid Cell A Hyperlink Target?

I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clic

Solution 1:

Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:

a {
  text-decoration: none;
  color: #333;
}
.tabs {
  position: relative;
  clear: both;
}
.tabs.tab {
  float: left;
  margin-right: 10px;
}
.content {
  position: absolute;
  background-color: white;
  width: 100%;
  left: 0px;
}
.tabs.tab:nth-of-type(1) .content {
  z-index: 1;
}
.tab:targeta {
  font-weight: bold;
}
.tab:target.content {
  z-index: 1;
}

<divclass="tabs"><divclass="tab"id="tab1"><ahref="#tab1">Tab 1</a><divclass="content">Content of Tab1</div></div><divclass="tab"id="tab2"><ahref="#tab2">Tab 2</a><divclass="content">Content of Tab2</div></div><divclass="tab"id="tab3"><ahref="#tab3">Tab 3</a><divclass="content">Content of Tab3</div></div></div>