Search code examples
csscss-grid

Why is the Grid Container selection only showing the first column?

I know enough CSS to be dangerous but not productive. I just learned about grids.

In my image below, you'll see I have a 2 column grid set up. The left column contains a "project name". This is an li tag. The right column contains a settings gear icon. This is a span tag. These are both children of a parent div

I set the grid up on the parent div, which I have rolled over in the image below. Why is the grid container size only the size of the first column and not the whole row?

This is causing me confusion because I want to have a border across the whole row when I rollover the row.

css grid

My HTML (JSX):

<div className={styles.project}>
  <li onClick={() => props.onSelect(props.name)}>{props.name}</li>
  <span className={styles.settings}>{"\u2699"}</span>
</div>

My CSS:

.project {
  font-family: "Rubik", sans-serif;
  grid-template-areas: "name settings";
  grid-template-columns: 150px 35px;
  grid-gap: 0px;
  display: grid;
  cursor: pointer;
  width: 100%;
  font-size: 13px;
}

.project li:hover {
  border-radius: 200px;
  border: 1px solid;
  padding-right: 160px;
}

.project li {
  list-style-type: none;
  grid-area: name;
  padding: 10px;
  margin: 10px;
}

.project .settings {
  grid-area: settings;
  text-align: center;
  align-self: center;
  font-size: 18px;
}

.project .settings:hover {
  border-radius: 200px;
  border: 1px solid;
  padding-right: -160px;
}
Solution

  • Looks like this was due to the size I chose for the first grid column:

    grid-template-columns: 150px 35px;

    Which is fine except I was then adding padding and margins so it pushed the second grid out.

    Resolved by changing it to:

    grid-template-columns: auto 35px;

    And setting my hover to

    (note: In my example above I had the hover on the li tag)

    .project:hover {
  border-radius: 200px;
  border: 1px solid;
  border-width: 100%;
}