Kevin Powell - Community•2y ago

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 EfeOP•2y ago

Grid auto fit template cols should suppose to be make it go next line when the grid items touch each other?

Chris Bolson•2y 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 EfeOP•2y 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?

Gaming

Programming

grid-template-columns auto fit not working as expected