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

Question

[DmitriyKLN]

.

<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%;
}

Comments

[Kentavr16]

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

[DmitriyKLN]

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

Answer 1

[Сергей delphinpro]

.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;
}

Comments

[DmitriyKLN]

Спасибо.