html - Flexbox & Grid Issue: Image Block Shrinks Unexpectedly on Small Screens

I have a layout where .digital__main is a flex container, and inside it, .digital__section is a flex child that contains a .digital__list using display: grid. Each grid item (.digital__item) contains an image block (.digital__img) styled with padding-bottom: 75% to maintain an aspect ratio.

Everything works fine on larger screens, but when I switch flex-direction: column at a certain breakpoint (in my case, @include sm), the image blocks shrink too much, cutting off content instead of maintaining the expected proportions.

html

<div class="digital">
            <div class="digital__inner">
              <div class="digital__main">
                <div class="digital__content">
                  <h2 class="digital__title">Диджитал-реклама</h2>
                </div>
                <div class="digital__section">
                  <ul class="digital__list">
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload is-loaded" data-loaded="true">
                                <source srcset="images/digital/digital-01.webp" data-srcset="images/digital/digital-01.webp"><img src="images/digital/digital-01.jpg" data-src="images/digital/digital-01.jpg" alt="Cайт&nbsp; /" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">Cайт&nbsp; <a href="#">/</a></p>
                      </div>
                    </li>
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload is-loaded" data-loaded="true">
                                <source srcset="images/digital/digital-02.webp" data-srcset="images/digital/digital-02.webp"><img src="images/digital/digital-02.jpg" data-src="images/digital/digital-02.jpg" alt="Электронная газета Quality News" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">Электронная газета Quality News</p>
                      </div>
                    </li>
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload">
                                <source srcset="images/icons/empty.png" data-srcset="images/digital/digital-03.webp"><img src="images/icons/empty.png" data-src="images/digital/digital-03.jpg" alt="E-mail рассылки" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">E-mail рассылки</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

sass

.digital
   &__main
      display: flex
      justify-content: space-between
      flex-wrap: wrap
      gap: var(--gap)
   &__content
      max-width: 350px
   &__section
      flex-grow: 1
   &__list
      display: grid
      grid-template-columns: repeat(3, minmax(200px, 380px))
      gap: var(--gap)
   &__title
      @extend .title
   &__img
      @include img-cover(75%, var(--border-radius-15))
   &__info
      padding-top: 15px
   &__text
      @extend .title
      @extend .title--second
      letter-spacing: var(--letter-spacing)
      a
         text-decoration: underline
   @include xl
      &__main
         flex-direction: column
      &__content
         max-width: 100%
   @include sm
      &__list
         grid-template-columns: 1fr
      &__section
         flex-grow: 0

@include sm // problem breakpoint (767px)

I tried setting width: 100% on .digital__section and .digital__img, adding align-items: stretch to .digital__main, removing flex-grow: 1 from .digital__section, changing grid-auto-rows: auto, and setting min-height: 200px on .digital__img, but the issue persists.

IMPORTANT: The issue is resolved when I set .digital__main { display: block; }, but I would prefer to keep it as display: flex.

html

<div class="digital">
            <div class="digital__inner">
              <div class="digital__main">
                <div class="digital__content">
                  <h2 class="digital__title">Диджитал-реклама</h2>
                </div>
                <div class="digital__section">
                  <ul class="digital__list">
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload is-loaded" data-loaded="true">
                                <source srcset="images/digital/digital-01.webp" data-srcset="images/digital/digital-01.webp"><img src="images/digital/digital-01.jpg" data-src="images/digital/digital-01.jpg" alt="Cайт&nbsp; https://ria-stk.ru/" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">Cайт&nbsp; <a href="#">https://ria-stk.ru/</a></p>
                      </div>
                    </li>
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload is-loaded" data-loaded="true">
                                <source srcset="images/digital/digital-02.webp" data-srcset="images/digital/digital-02.webp"><img src="images/digital/digital-02.jpg" data-src="images/digital/digital-02.jpg" alt="Электронная газета Quality News" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">Электронная газета Quality News</p>
                      </div>
                    </li>
                    <li class="digital__item">
                      <div class="digital__img">
                              <picture class="lazyload">
                                <source srcset="images/icons/empty.png" data-srcset="images/digital/digital-03.webp"><img src="images/icons/empty.png" data-src="images/digital/digital-03.jpg" alt="E-mail рассылки" width="380" height="285">
                              </picture>
                      </div>
                      <div class="digital__info">
                        <p class="digital__text">E-mail рассылки</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

sass

.digital
   &__main
      display: flex
      justify-content: space-between
      flex-wrap: wrap
      gap: var(--gap)
   &__content
      max-width: 350px
   &__section
      flex-grow: 1
   &__list
      display: grid
      grid-template-columns: repeat(3, minmax(200px, 380px))
      gap: var(--gap)
   &__title
      @extend .title
   &__img
      @include img-cover(75%, var(--border-radius-15))
   &__info
      padding-top: 15px
   &__text
      @extend .title
      @extend .title--second
      letter-spacing: var(--letter-spacing)
      a
         text-decoration: underline
   @include xl
      &__main
         flex-direction: column
      &__content
         max-width: 100%
   @include sm
      &__list
         grid-template-columns: 1fr
      &__section
         flex-grow: 0

@include sm // problem breakpoint (767px)

IMPORTANT: The issue is resolved when I set .digital__main { display: block; }, but I would prefer to keep it as display: flex.

Share Improve this question edited Mar 24 at 20:08 rustyBucketBay 4,6164 gold badges26 silver badges59 bronze badges asked Mar 22 at 16:03 Henry Pleinvuew 13 bronze badges

2 Please review provided code, could not execute in isolation. Info – Frox Commented Mar 22 at 16:51

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Instead of

grid-template-columns: 1fr;

try using:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

This will make the layout more responsive by automatically adjusting the number of columns based on available space.

If images appear distorted or don't fit well, use:

object-fit: cover;

This ensures images maintain their aspect ratio while covering the designated space. Also, avoid setting a fixed height on images if they appear stretched or cropped incorrectly.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744309184a4567865.html

html - Flexbox & Grid Issue: Image Block Shrinks Unexpectedly on Small Screens - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

html - Flexbox &amp; Grid Issue: Image Block Shrinks Unexpectedly on Small Screens - Stack Overflow

1 Answer 1

相关推荐

html - Flexbox &amp; Grid Issue: Image Block Shrinks Unexpectedly on Small Screens - Stack Overflow

发表回复

评论列表（0条）

联系我们

400-800-8888

html - Flexbox & Grid Issue: Image Block Shrinks Unexpectedly on Small Screens - Stack Overflow

html - Flexbox & Grid Issue: Image Block Shrinks Unexpectedly on Small Screens - Stack Overflow