How to make width of wrapper grid div be the width of its contents

Issue

I'm unsure if I need to be using a grid for this but I'm also unsure of how else to go about it. I'm only running into this issue because I want hover to look a certain way, while keeping everything correctly centered.

I currently have (written for React):

<div className="rounded-md bg-slate-300">
  <div className="grid grid-cols-3">
    <div className="text-center"><strong>Title1</strong></div>
    <div className="text-center"><strong>Title2</strong></div>
    <div className="text-center"><strong>Title3</strong></div>
  </div>
  {
    ["one", "two", "three", "four", "five"].map((item, index) => {
      return (
        <div className="grid grid-cols-3 rounded bg-slate-500"> <-- Hover on this!
          <div className="text-center">{item}</div>
          <div className="text-center">{item}</div>
          <div className="text-center">{index}</div>
        </div>
      )
    })
  }
</div>

Which looks like:

The layout is fine, but when I hover over what I marked in the snippet above (i.e., every row below the title row), I only want the area circled in red below to change color.

Currently everything is given a background color for demonstration purposes, but eventually they would have hover:bg-some-color instead.

Unsure of how to change that container size to be the width of the row with everything centered in thirds.

An answer close to what I'm desiring is appreciated, too. Perhaps this would be easier with flexbox or something.

I've tried a few configurations with flexbox and I'm unable to get my desired result still.

The flex version with the layout I like looks like this:

["one", "two", "three", "four", "five"].map((item, index) => {
  return (
  <div className="flex rounded hover:bg-slate-500">
      <div className="flex justify-center flex-1">{item}</div>
      <div className="flex justify-center flex-1">{item}</div>
      <div className="flex justify-center flex-1">{index}</div>
    </div>
  )
})

But unable to add any CSS to the wrapper or inner divs that make the background the width I want.

Solution

Looks like a table to me, rather than a grid.

To get the hover effect you want, start with a 50% slate, 50% red gradient background on the first cell of the highlighted row, and in the reverse direction on the last cell.

tr:hover td {
  background: var(--clr-red);
}
tr:hover td:first-child {
  background: linear-gradient(90deg, var(--clr-slate) 50%, var(--clr-red) 50%);
}
tr:hover td:last-child {
  background: linear-gradient(270deg, var(--clr-slate) 50%, var(--clr-red) 50%);
}

To get the background to extend behind the values in the first and last cells, add a <span> around the values in those cells, and give these the same background colour.

tr:hover td, tr:hover td>span {
  background: var(--clr-red);
}

Here is the complete implementation:

:root {
  --clr-grey: #cbd5e1;
  --clr-slate: #64748b;
  --clr-red: #d70000;
}
.t1 {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
}
th, td, td>span {
  padding: 2px 10px;
}
th, td {
  text-align: center;
  width: 33.3%
}
td>span {
  border-radius: 4px;
}
th:first-child, td:first-child {
  border-radius: 4px 0 0 4px;
}
th:last-child, td:last-child {
  border-radius: 0 4px 4px 0;
}
th {
  background: var(--clr-grey);
}
td {
  background: var(--clr-slate);
}
tr:hover td, tr:hover td>span {
  background: var(--clr-red);
}
tr:hover td:first-child {
  background: linear-gradient(90deg, var(--clr-slate) 50%, var(--clr-red) 50%);
}
tr:hover td:last-child {
  background: linear-gradient(270deg, var(--clr-slate) 50%, var(--clr-red) 50%);
}

<table class="t1">
  <tr><th>Title1</th><th>Title2</th><th>Title3</th></tr>
  <tr><td><span>one</span></td><td>one</td><td><span>0</span></td></tr>
  <tr><td><span>two</span></td><td>two</td><td><span>1</span></td></tr>
  <tr><td><span>three</span></td><td>three</td><td><span>2</span></td></tr>
  <tr><td><span>four</span></td><td>four</td><td><span>3</span></td></tr>
  <tr><td><span>five</span></td><td>five</td><td><span>4</span></td></tr>
</table>

Answered By - Brett Donald