Grid increase row size for specific row and item-CodePudding

im using a Grid to show 5 Items per row on my project.

When i click on an item, i wanna be able to show the item-detail by increaing the size of the html element.

Is there any trick in CSS where i cant say the Grid to grow an specific item and shrink the others in the row and also saying that i need for one row more space then the others.

CodePudding user response：

Not really any trick to being able to do this, just hard work, or trial and error. Depends on exactly what you're looking to do.

If you don't mind about responsive behavior too much (ie, what happens when this page is shrunk to mobile size?) then I suppose you could implement this with scale css transforms on mouseover, or perhaps using calc to carefully set widths in CSS, or a combination of both.

If you're looking to use the CSS grid property you're fresh out of luck, it's not really designed to handle complex interactions like this. I'd build this from scratch with flexbox or manual positioning with JS.

CodePudding user response：

Not the best approach but will solve your problem.

Margin 0 5rem; will give a margin left and right to the box that you hover.

.box:hover{
  transform: scale(1.3);
  margin: 0 5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  background-color: bisque;
}



.container{
  padding:1rem;
  display: flex;
  flex-direction: row;
  gap:1rem;
  padding:10rem
}

.box{
  height:15rem;
  background-color: grey;
  display: flex;
  flex:1;
  margin-top: 2rem;
  transition: 0.5s;
  
}

.box:hover{
  transform: scale(1.3);
  margin: 0 5rem;
}

<div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
</div>