How to make hover state on row table with CSS grid layout

Question

This a table that created with CSS Grid Layout, but I have a problem with it, I can\'t make hover state on each row.

I only want use CSS for this.

Can anyone

Answer 1

I have solution for your problem. The example below:

.grid .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid gray;
}
.grid .row div {
  padding: 10px;
  display: flex;
  align-items: center;
}
.grid .row:last-child {
  border: none;
}
.grid .row:hover {
  background-color: #cccccc;
  transition: .2s all;
}

  

    
Header
    
Header
    
Header
    
Header
  
  

    
Content
    
Content
    
Content
    
Content
  
  

    
Content
    
Content
    
Content
    
Content
  
  

    
Content
    
Content
    
Content
    
Content