Элементы выходят за пределы grid-блока. Как сделать, так чтобы они сжимались или перемещались вниз при изменении расширения экрана?

Ссылка скопирована
CSS CSS Grid HTML
18 февраля 2026 1 ответ

Элементы выходят за пределы grid-блока. Как сделать, так чтобы они сжимались или перемещались вниз при изменении расширения экрана?

.

<section class="news_block">             <div class="news">                 <h1 class="new">НОВОСТИ</h1>                 <a href="#" class="allNew">ВСЕ НОВОСТИ</a>             </div>             <div class="news_block_main">                 <div class="n news_block_main_txt1">                     <div class="news_block_main_center"> <!--Для паддинга-->                         <div class="rectangle"><p class="rectangle_date">29 декабря 2022 Г.</p></div>                         <p class="news_block_title">Lorem15</p>                         <p class="news_block_text">Lorem30</p>                     </div>                 </div>                 <div class="n news_block_main_txt2">                     <div class="news_block_main_center">                         <div class="rectangle"><p class="rectangle_date"> декабря 2022 Г.</p></div>                         <p class="news_block_title">Lorem15</p>                         <p class="news_block_text">Lorem30 </p>                     </div>                 </div>                 <div class="n news_block_main_txt3">                     <div class="news_block_main_center">                         <div class="rectangle"><p class="rectangle_date">14 декабря 2022 Г.</p></div>                         <p class="news_block_title">Lorem15</p>                         <p class="news_block_text">Lorem30</p>                     </div>                 </div>                 <div class="n news_block_main_txt4">                     <div class="news_block_main_center">                         <div class="rectangle"><p class="rectangle_date">29 декабря 2022 Г.</p></div>                         <p class="news_block_title">Lorem15</p>                         <p class="news_block_text">Lorem30</p>                     </div>                 </div>             </div>         </section>

<section class="news_block"> <div class="news"> <h1 class="new">НОВОСТИ</h1> <a href="#" class="allNew">ВСЕ НОВОСТИ</a> </div> <div class="news_block_main"> <div class="n news_block_main_txt1"> <div class="news_block_main_center"> <!--Для паддинга--> <div class="rectangle"><p class="rectangle_date">29 декабря 2022 Г.</p></div> <p class="news_block_title">Lorem15</p> <p class="news_block_text">Lorem30</p> </div> </div> <div class="n news_block_main_txt2"> <div class="news_block_main_center"> <div class="rectangle"><p class="rectangle_date"> декабря 2022 Г.</p></div> <p class="news_block_title">Lorem15</p> <p class="news_block_text">Lorem30 </p> </div> </div> <div class="n news_block_main_txt3"> <div class="news_block_main_center"> <div class="rectangle"><p class="rectangle_date">14 декабря 2022 Г.</p></div> <p class="news_block_title">Lorem15</p> <p class="news_block_text">Lorem30</p> </div> </div> <div class="n news_block_main_txt4"> <div class="news_block_main_center"> <div class="rectangle"><p class="rectangle_date">29 декабря 2022 Г.</p></div> <p class="news_block_title">Lorem15</p> <p class="news_block_text">Lorem30</p> </div> </div> </div> </section>

.news_block{     width: 67.5%;     margin: 0 auto;     border: 1px solid black; } .news{     display: flex;     justify-content: space-between;     margin-bottom: 100px; } .new{     color: var(--black, #333);     font-family: HelveticaNeueCyr;     font-size: 36px;     font-style: normal;     font-weight: 400;     line-height: 140%;     letter-spacing: 1.8px;     text-transform: uppercase; } .allNew{     color: var(--blue, #133D8D);     text-align: right;     font-family: HelveticaNeueCyr;     font-size: 18px;     font-style: normal;     font-weight: 700;     line-height: 140%;     letter-spacing: 0.9px;     text-transform: uppercase;     text-decoration: none; } .news_block_main{     display: grid;     grid-template-columns: repeat(4, 1fr);     grid-template-areas:      "img1 img2 img3 img4";     gap: 24px;     margin-bottom: 160px; } .n{     height: 330px;     max-width: 306px;     display: inline-block; } .news_block_main_txt1{     background: url(news1.jpg);     grid-area: img1; } .news_block_main_txt2{     background: url(news2.jpg);     grid-area: img2; } .news_block_main_txt3{     background: url(news3.svg);     grid-area: img3; } .news_block_main_txt4{     background: url(news4.jpg);     grid-area: img4; } .news_block_main_center{     padding: 33px 29px 25px 35px; } .rectangle{     background: red;       display: inline-flex;     margin-bottom: 113px;     color: var(--white, #FFF);     font-family: HelveticaNeueCyr;     font-size: 13px;     font-style: normal;     font-weight: 550;     line-height: 140%; } .rectangle_date{     padding: 12px; } .news_block_title{     color: var(--white, #FFF);     font-family: HelveticaNeueCyr;     font-size: 16px;     font-style: normal;     font-weight: 550;     line-height: 140%;     padding-bottom: 15px;  } .news_block_text{     overflow: hidden;     color: var(--white, #FFF);     text-overflow: ellipsis;     white-space: nowrap;      font-family: HelveticaNeueCyr;     font-size: 14px;     font-style: normal;     font-weight: 400;     line-height: 140%; }

.news_block{ width: 67.5%; margin: 0 auto; border: 1px solid black; } .news{ display: flex; justify-content: space-between; margin-bottom: 100px; } .new{ color: var(--black, #333); font-family: HelveticaNeueCyr; font-size: 36px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: 1.8px; text-transform: uppercase; } .allNew{ color: var(--blue, #133D8D); text-align: right; font-family: HelveticaNeueCyr; font-size: 18px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.9px; text-transform: uppercase; text-decoration: none; } .news_block_main{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "img1 img2 img3 img4"; gap: 24px; margin-bottom: 160px; } .n{ height: 330px; max-width: 306px; display: inline-block; } .news_block_main_txt1{ background: url(news1.jpg); grid-area: img1; } .news_block_main_txt2{ background: url(news2.jpg); grid-area: img2; } .news_block_main_txt3{ background: url(news3.svg); grid-area: img3; } .news_block_main_txt4{ background: url(news4.jpg); grid-area: img4; } .news_block_main_center{ padding: 33px 29px 25px 35px; } .rectangle{ background: red; display: inline-flex; margin-bottom: 113px; color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 13px; font-style: normal; font-weight: 550; line-height: 140%; } .rectangle_date{ padding: 12px; } .news_block_title{ color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 16px; font-style: normal; font-weight: 550; line-height: 140%; padding-bottom: 15px; } .news_block_text{ overflow: hidden; color: var(--white, #FFF); text-overflow: ellipsis; white-space: nowrap; font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; }

Дополнительно:

Сделать флекс вместо грида с flex-wrap:wrap

  • Kentavr16, с flex я более менее разобрался. А вот с grid, возникают недопонимания, вот и хочу узнать, как работать с grid. 

    • .news_block_main{     display: grid; +   grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); -    grid-template-columns: repeat(4, 1fr); -    grid-template-areas:  -    "img1 img2 img3 img4";     gap: 24px;     margin-bottom: 160px; }

    .news_block_main{ display: grid; + grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); - grid-template-columns: repeat(4, 1fr); - grid-template-areas: - "img1 img2 img3 img4"; gap: 24px; margin-bottom: 160px; }

    • Спасибо.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Юрий Linux Ответ

    Для того чтобы решить проблему с элементами, которые выходят за пределы grid-блока и не сжимаются или не перемещаются вниз при изменении расширения экрана, можно воспользоваться свойством CSS `grid-auto-flow`.

    Это свойство определяет, как добавлять новые элементы в grid-контейнер, когда все ячейки уже заполнены. Значение `row` указывает, что элементы будут добавляться в новую строку, а значение `column` - в новую колонку.

    Пример использования:

    .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: row; /* или column */
}

    .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-auto-flow: row; /* или column */ }

    В данном примере, при изменении размера экрана, элементы будут добавляться в новую строку (или колонку, в зависимости от значения `grid-auto-flow`), что позволит контролировать их отображение и избежать выхода за пределы grid-блока.

    Таким образом, используя свойство `grid-auto-flow` с соответствующим значением, можно решить проблему с элементами, которые не сжимаются или не перемещаются вниз при изменении расширения экрана.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ