Is it possible to incorporate a LINK within the CSS GRID layout?

Hey everyone, I've encountered an issue with my link placement in the grid. I'm looking to turn the entire box into a clickable link.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Hiragino Kaku Gothic Pro W3, Arial;
}

.title-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.title {
  grid-area: title;
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 34px;
  color: #000000;
  grid-column: 1 / span 5;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.container div {
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 28px;
  color: #000000;
}

.header {
  background-color: #86a789 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
}

.header2 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 2 / span 5;
}

.header3 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1 / 2;
}

.header4 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1;
  grid-row: 7 / span 2;
  align-content: center;
}

.arrow {
  font-size: 28px;
  color: #739072;
}

.size {
  grid-column: 2 / span 2;
  text-decoration: none;
}

.size2 {
  grid-column: 4 / span 2;
}

.empty {
  background-color: #e5e5e5 !important;
  grid-column: 4 / span 2;
}

.empty2 {
  background-color: #e5e5e5 !important;
}
<div class="title-container">
  <div class="title">
    <p style="color: #739072 !important; float: left; text-align: left; "><b>リード選びチャート</b><br>愛犬の性格、体重に合わせてリードを選びましょう！</p><img src="flexi-logo.png" width="12%" style="float: right;">
  </div>
</div>

<div class="container">
  <div class="header"><b>愛犬の性格</b></div>
  <div class="header2"><b>愛犬の体重</b></div>

  <div class="header3">おとなしい</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">普通</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">とても活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">リードの種類</div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>

  <div class="header4">コードタイプ</div>
  <div class="size"><a href="">Sサイズ（5m）</a></div>
  <div class="empty"></div>
  <div class="size">Sサイズ（8m）</div>
  <div class="empty"></div>

  <div class="header3">とても活発</div>
  <div class="empty2"></div>
  <div>Sサイズ</div>
  <div class="size2">Mサイズ</div>
</div>

I'm struggling with placing a link under header 4 code. I want it within the box but can't figure out how to do it. Any suggestions on how to accomplish this would be greatly appreciated!

Thank you for your help!

htmlcsscss-grid

Answer №1

If you want to enhance your styling, consider using a link a instead of a div, and apply the necessary CSS rules like .container > a {}.

Another tip is to optimize your CSS by combining selectors, for example, [class^="header] targets classes starting with header.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Hiragino Kaku Gothic Pro W3, Arial;
}

.title-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.title {
  grid-area: title;
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 34px;
  color: #000000;
  grid-column: 1 / span 5;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.container div,
.container > a {
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 28px;
  color: #000000;
}

.header {
  background-color: #86a789 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
}

.header2 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 2 / span 5;
}

.header3 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1 / 2;
}

.header4 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1;
  grid-row: 7 / span 2;
  align-content: center;
}

.arrow {
  font-size: 28px;
  color: #739072;
}

.size {
  grid-column: 2 / span 2;
  text-decoration: none;
}

.size2 {
  grid-column: 4 / span 2;
}

.empty {
  background-color: #e5e5e5 !important;
  grid-column: 4 / span 2;
}

.empty2 {
  background-color: #e5e5e5 !important;
}
<div class="title-container">
  <div class="title">
    <p style="color: #739072 !important; float: left; text-align: left; "><b>リード選びチャート</b><br>愛犬の性格、体重に合わせてリードを選びましょう！</p><img src="flexi-logo.png" width="12%" style="float: right;">
  </div>
</div>

<div class="container">
  <div class="header"><b>愛犬の性格</b></div>
  <div class="header2"><b>愛犬の体重</b></div>

  <div class="header3">おとなしい</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">普通</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">とても活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">リードの種類</div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>

  <div class="header4">コードタイプ</div>
  <a class="size" href="#">Sサイズ（5m</a>
  <div class="empty"></div>
  <div class="size">Sサイズ（8m）</div>
  <div class="empty"></div>

  <div class="header3">とても活発</div>
  <div class="empty2"></div>
  <div>Sサイズ</div>
  <div class="size2">Mサイズ</div>
</div>

Answer №2

To start, you must select the div.size element that contains a tag and set it to display:flex with margin 0 and padding 0. Then, target the a tag inside and specify the height as 100% and width as 100%. (I included text-decoration:none to eliminate underline)

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Hiragino Kaku Gothic Pro W3, Arial;
}

.title-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.title {
  grid-area: title;
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 34px;
  color: #000000;
  grid-column: 1 / span 5;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.container div {
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 28px;
  color: #000000;
}

.header {
  background-color: #86a789 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
}

.header2 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 2 / span 5;
}

.header3 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1 / 2;
}

.header4 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1;
  grid-row: 7 / span 2;
  align-content: center;
}

.arrow {
  font-size: 28px;
  color: #739072;
}

.size{
  grid-column: 2 / span 2;
  text-decoration: none;
}

div.size:has(a){
  display:flex;
  margin:0;
  padding: 0;
}

div.size a{
  height:100%;
  width:100%;
  text-decoration:none;
  color:white;
  background-color:blue;
}

.size2 {
  grid-column: 4 / span 2;
}

.empty {
  background-color: #e5e5e5 !important;
  grid-column: 4 / span 2;
}

.empty2 {
  background-color: #e5e5e5 !important;
}
<div class="title-container">
  <div class="title">
    <p style="color: #739072 !important; float: left; text-align: left; "><b>リード選びチャート</b><br>愛犬の性格、体重に合わせてリードを選びましょう！</p><img src="flexi-logo.png" width="12%" style="float: right;">
  </div>
</div>

<div class="container">
  <div class="header"><b>愛犬の性格</b></div>
  <div class="header2"><b>愛犬の体重</b></div>

  <div class="header3">おとなしい</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">普通</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">とても活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">リードの種類</div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>

  <div class="header4">コードタイプ</div>
  <div class="size"><a href="">Sサイズ（5m）</a></div>
  <div class="empty"></div>
  <div class="size">Sサイズ（8m）</div>
  <div class="empty"></div>

  <div class="header3">とても活発</div>
  <div class="empty2"></div>
  <div>Sサイズ</div>
  <div class="size2">Mサイズ</div>
</div>

Answer №3

You have the option to attach an onclick event and include a small piece of JavaScript code that can determine where your browser should navigate.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Hiragino Kaku Gothic Pro W3, Arial;
}

.title-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.title {
  grid-area: title;
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 34px;
  color: #000000;
  grid-column: 1 / span 5;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.container div {
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 28px;
  color: #000000;
}

.header {
  background-color: #86a789 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
}

.header2 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 2 / span 5;
}

.header3 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1 / 2;
}

.header4 {
  background-color: #739072 !important;
  color: #000000;
  font-size: 28px;
  color: #FFFFFF !important;
  grid-column: 1;
  grid-row: 7 / span 2;
  align-content: center;
}

.arrow {
  font-size: 28px;
  color: #739072;
}

.size {
  grid-column: 2 / span 2;
  text-decoration: none;
}

.size2 {
  grid-column: 4 / span 2;
}

.empty {
  background-color: #e5e5e5 !important;
  grid-column: 4 / span 2;
}

.empty2 {
  background-color: #e5e5e5 !important;
}
<div class="title-container">
  <div class="title">
    <p style="color: #739072 !important; float: left; text-align: left; "><b>Choose Lead Chart</b><br>Select the lead based on your dog's personality and weight!</p><img src="flexi-logo.png" width="12%" style="float: right;">
  </div>
</div>

<div class="container">
  <div class="header"><b>Dog's Personality</b></div>
  <div class="header2"><b>Dog's Weight</b></div>

  <div class="header3">Calm</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">Average</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">Energetic</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">Very Energetic</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">Lead Type</div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>

  <div class="header4" onclick="window.location.href = 'https://stackoverflow.com'">Code Type</div>
  <div class="size"><a href="">Small Size (5m)</a></div>
  <div class="empty"></div>
  <div class="size">Small Size (8m)</div>
  <div class="empty"></div>

  <div class="header3">Very Energetic</div>
  <div class="empty2"></div>
  <div>Small Size</div>
  <div class="size2">Medium Size</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Whenever I click on a field and move to another one, the span tag turns red. Then, after pressing the submit button, an alert message pops up. However, if I turn the span red, fill in the field, and press the submit button, it shows success even if other f ...

javascripthtmlcss

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

javascriptcssangularjshtml

What is the best way to add a hyperlink to a specific section using Html.ActionLink in MVC?

Recently, I dove into the world of MVC and came across a puzzling issue. There's this HTML page that smoothly scrolls down to a specific section when you click on its name from the navigation bar. However, now I need to convert this piece of HTML code ...

htmlasp.net-mvc

Divs are not properly positioned

I’m struggling to align three divs in a row, each with unique cosmetic styles. Two have images on the left and right sides, while the middle one contains a text-filled div. While I’ve managed to fit the image in the divs just fine, the middle div with ...

htmlcss

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Mastering the nav-item class in Bootstrap 4 for optimal navigation functionality

When I look at the examples in the documentation, I have noticed that the .nav-item class is not doing anything when I inspect my nav bar (the class doesn't show up in the console)... Although this isn't a major issue as I can apply my own style ...

cssbootstrap-4

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...

cssangularjsreactjstwitter-bootstrapsass

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

jqueryhtmlcss

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

javascripthtmljsonajax

Enhance class names by utilizing addEventListener within the useEffect hook

I'm having trouble with creating a hamburger button menu. The issue I'm facing is that when I click the button, nothing happens. Even though I can log something in the toogleHamburger function and see it in the console, the styling does not chang ...

cssreactjssass

Tips for employing 'live CSS' in Rails

As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...

htmlcssruby-on-railsruby

Can you show me how to extract the html code from a website using python's requests module?

Attempting to retrieve an HTML file from the specified website: Inspecting the source in Google Chrome allows me to obtain the HTML without any difficulty. However, I aim to download multiple pages using Python requests. Unfortunately, when attempting to ...

pythonhtmlweb-scrapingpython-requests

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

htmlcss

Content is not centered with Bootstrap's flexbox

The alignment of content is not centered using bootstrap flex <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div> <div cla ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

When creating Angular directives, I've noticed that some directives could also be defined as either an HTML element or an attribute. I'm curious to know what the community convention is for choosing between the two, and the reasons behind it. Fo ...

javascripthtmlangularjs

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

What steps are necessary to add a Contact Us form to my HTML website?

Currently, I am searching for a way to add a "Contact Us" section to my website that is completely HTML-based. I believe the best approach would involve using a PHP script to handle sending emails from a form on the Contact Us page, but I am not familiar ...

phpjavascriptjqueryhtml

Turn off hover effect for MUI DataGrid

I'm having trouble figuring out how to disable the hover effect on a row in the MUI Datagrid. I've searched through the API documentation but couldn't find a straightforward solution. Any suggestions on how to achieve this? <DataGrid ...

cssreactjsmaterial-uijsx

Optimizing CSS to eliminate extra space from the first button in the navigation menu bar

I'm currently working on creating a simple CSS-based navigation bar, but I've encountered an issue. The first item in my HTML list seems to have extra space to its left that I can't seem to remove. Check out the live example here Also avai ...

htmlcssnavigationuinavigationbar