How to make next/image fill available grid space?

user_11620862 0
Viewed 160

How do I make next/image span from grid 1 through 8? When I try it with img tag it works but with next/image it doesn't.

.project {
  display: grid;
  margin-bottom: 4rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.project-img {
  grid-column: 1 / span 8;
  grid-row: 1 / 1;
  height: 30rem;
  border-radius: 0.25rem;
  box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
}

<article className='project'>
  <img
    src={img}
    className='project-img'
    alt={title}
    height='100%'
    width='100%'
  />
  <div className='project-info'>....</div>
</article>

Using next/image

Using img tag

nextjs-image next.js reactjs css
1 Answers

I believe you have a few solutions here. First let me recommend that you spend a little time practicing with css grid on this website, it's very helpful. The first solution i see is that your row starts and ends at the same "box". That shouldn't be the case. It should end at 2 because that specifies the "box" it ends at but doesn't include. The second solution is to use the grid-area property on this next/image you want to style. That would look like this:

.project-image{
  grid-area: 1/1/2/8;
}

This specifies that the row starts at 1, column starts at 1, row ends at 1, column ends at 8. You could also break the grid-area property up into it's composite properties, grid-row-start, grid-column- start, grid-row-end, and grid-column-end. That would look like this:

.project-image{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 8; 
}

If wether or not one of those solutions works for you, I encourage you to check out that website. If my answers didn't work, I guarantee that you will find a solution there! If my answers do work it'll still solidify the concept of css grid for you.

user_171609580
Related