.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.grid-item {
padding: 20px;
background-color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}

.grid-item:hover {
background-color: #f9f9f9;
}

CSS Grid Hover Rows Effect

In this example, we have created a simple grid layout with 4 columns using CSS Grid. Each grid item represents a row in the grid.

We have applied a background color and padding to the grid items to make them visually distinct. Additionally, we have added a transition property to smoothly animate the background color change on hover.

When a user hovers over a grid item, the background color changes to a lighter shade, providing a visual feedback to the user. This simple hover effect adds interactivity to the grid layout and improves user experience.

Feel free to customize the grid layout and hover effect according to your needs and design preferences. CSS Grid offers a powerful and flexible way to create complex layouts and effects, making it a great tool for web designers and developers.