grid-template-columns auto fit not working as expected

.videos__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
place-content: center;
place-items: center;
margin-top: 2rem;
margin-left: 0.75rem;
margin-right: 0.75rem;
gap: 1.5rem;

&-item {
padding: 0.5rem;
}

video {
height: 250px;
}
}
.videos__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
place-content: center;
place-items: center;
margin-top: 2rem;
margin-left: 0.75rem;
margin-right: 0.75rem;
gap: 1.5rem;

&-item {
padding: 0.5rem;
}

video {
height: 250px;
}
}
<div className='videos-page__container'>
<div className='videos__list'>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>

<video src='/assets/videos/1-video.mp4' muted />
</div>
<p>We make the weddings beautiful together</p>
</div>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>
{' '}

<video src='/assets/videos/2-video.mp4' muted />
</div>

<p>We make the weddings beautiful together</p>
</div>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>

<video src='/assets/videos/3-video.mp4' muted />
</div>

<p>We make the weddings beautiful together</p>
</div>
</div>
</div>
<div className='videos-page__container'>
<div className='videos__list'>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>

<video src='/assets/videos/1-video.mp4' muted />
</div>
<p>We make the weddings beautiful together</p>
</div>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>
{' '}

<video src='/assets/videos/2-video.mp4' muted />
</div>

<p>We make the weddings beautiful together</p>
</div>
<div className='videos__list-item'>
<div className='videos__list-item-image-wrapper'>

<video src='/assets/videos/3-video.mp4' muted />
</div>

<p>We make the weddings beautiful together</p>
</div>
</div>
</div>
3 Replies
Mert Efe
Mert Efe2y ago
Grid auto fit template cols should suppose to be make it go next line when the grid items touch each other?
Chris Bolson
Chris Bolson2y ago
Not when they touch but when they don't fit with the minimum width that you have defined. With the gap that you have set they should never touch each other
Mert Efe
Mert Efe2y ago
it's fixed when i changed the height from video to the videos__list-item-image-wrapper is it because that's the container?
Want results from more Discord servers?
Add your server