Как создать шаблон компонента список новостей, что бы генерировалась неоднородная структура блоков в Битрикс 1с?

Question

Понравилось мне вот такой дизайн списка новостей, ниже картинки представлен его код, но видимо bootstarpa не хватает что бы правильно отображался, поэтому прикрепил картинкой как это должно выглядеть. Так вот как мне на битриксе это реализовать, сложность в том что структура блоков не однородная и как их правильно сгенерировать что бы он автоматически их так расставлял, может порядковые номер как то присвоить или еще как то?

.blog-item {
    height: 277px;
    position: relative;
    border-radius: 10px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 0px 30px rgb(11 12 48 / 15%);
    box-shadow: 0px 0px 30px rgb(11 12 48 / 15%);
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.blog-item .bi-tag {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    display: inline-block;
    padding: 3px 20px 5px;
    border-radius: 2px;
    position: absolute;
    left: 20px;
    top: 20px;
}


.bg-gradient, .bd-text .bd-tag-share .s-share a:hover, .bh-text .play-btn, .schedule-table-tab .nav-tabs .nav-item .nav-link.active, .newslatter-inner .ni-form button, .latest-item .li-tag, .price-item .price-btn:hover, .price-item .pi-price, .price-item .tr-tag, .schedule-tab .nav-tabs .nav-item .nav-link.active, .site-btn {
    background-image: -o-linear-gradient(330deg, #ee8425 0%, #f9488b 100%), -o-linear-gradient(330deg, #ee8425 0%, #f9488b 100%);
    background-image: linear-gradient(120deg, #ee8425 0%, #f9488b 100%), linear-gradient(120deg, #ee8425 0%, #f9488b 100%);
}


.blog-item .bi-text {
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 100%;
    padding: 0 20px;
}
.blog-item .bi-text h5 {
    margin-bottom: 10px;
}
.blog-item .bi-text h5 a {
    color: #ffffff;
    line-height: 24px;
    font-weight: 600;
    display: block;
}

.blog-item .bi-text span {
    font-size: 14px;
    color: #ffffff;
    display: block;
}

.blog-item .bi-text span i {
    color: #f44949;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blog-item.large-item {
    height: 575px;
}

.blog-item .bi-text h3 a {
    font-size: 28px;
    color: #ffffff;
    font-weight: 600;
    line-height: 36px;
    display: block;
}


.primary-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 40px;
    color: #ffffff;
    text-align: center;
    border-radius: 50px;
    background-image: -webkit-gradient(linear, left top, right top, from(#ee8425), to(#f9488b)), -webkit-gradient(linear, left top, right top, from(#ee8425), to(#f9488b));
    background-image: -o-linear-gradient(left, #ee8425 0%, #f9488b 100%), -o-linear-gradient(left, #ee8425 0%, #f9488b 100%);
    background-image: linear-gradient(to right, #ee8425 0%, #f9488b 100%), linear-gradient(to right, #ee8425 0%, #f9488b 100%);
}

.load-more .primary-btn {
    padding: 12px 45px;
}
.load-more.blog-more {
    padding-top: 20px;
}

.load-more {
    text-align: center;
    padding-top: 10px;
}

<section class="blog-section spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-1.jpg" style="background-image: url(/img/blog/blog-1.jpg);">
                                <div class="bi-tag bg-gradient">Foody</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">Google's AI Assistant Aims to Transcend the Smart Speaker</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-2.jpg" style="background-image: url(/img/blog/blog-2.jpg);">
                                <div class="bi-tag bg-gradient">Foody</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">Free Classifiends Using Them To Promote</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blog-item set-bg large-item" data-setbg="/img/blog/blog-4.jpg" style="background-image: url(/img/blog/blog-4.jpg);">
                        <div class="bi-tag bg-gradient">Business</div>
                        <div class="bi-text">
                            <h3><a href="./blog-details.html">"Inspired By Modiji, Will Make Biopic": BJP's Ravi Kishan</a></h3>
                            <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-7.jpg" style="background-image: url(/img/blog/blog-7.jpg);">
                                <div class="bi-tag bg-gradient">Foody</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">The ZenBook With a Touchpad That Lights Up</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-8.jpg" style="background-image: url(/img/blog/blog-8.jpg);">
                                <div class="bi-tag bg-gradient">Foody</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">Is the Detel Posh a Posh Speaker?</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="blog-item set-bg large-item" data-setbg="/img/blog/blog-3.jpg" style="background-image: url(/img/blog/blog-3.jpg);">
                        <div class="bi-tag bg-gradient">Marketing</div>
                        <div class="bi-text">
                            <h3><a href="./blog-details.html">Lok Sabha Elections 2019 - In BJP, Only ''Tai'' Can Admonish Me: PM Modi On Sumitra
                                Mahajan</a></h3>
                            <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-5.jpg" style="background-image: url(/img/blog/blog-5.jpg);">
                                <div class="bi-tag bg-gradient">Design</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">The Biggest Stories Of January 06, 2019</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="blog-item set-bg" data-setbg="/img/blog/blog-6.jpg" style="background-image: url(/img/blog/blog-6.jpg);">
                                <div class="bi-tag bg-gradient">UX/UI</div>
                                <div class="bi-text">
                                    <h5><a href="./blog-details.html">Alexa Can Now Show You Things!</a></h5>
                                    <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blog-item set-bg" data-setbg="/img/blog/blog-9.jpg" style="background-image: url(/img/blog/blog-9.jpg);">
                        <div class="bi-tag bg-gradient">Marketing</div>
                        <div class="bi-text">
                            <h3><a href="./blog-details.html">"Still Waiting For BJP To Make Me Chief Minister": Goa Assembly Speaker</a></h3>
                            <span><i class="fa fa-clock-o"></i> 19th May, 2019</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="load-more blog-more">
                <a href="#" class="primary-btn">Load More</a>
            </div>
        </div>
    </section>

БЛОГ НА HUSL

Как создать шаблон компонента список новостей, что бы генерировалась неоднородная структура блоков в Битрикс 1с?

Ответы (0 шт):