Как я могу заставить свой шаблон отображать список в двух разных тегах div без дублирования

У меня есть список из моей модели, но я хочу, чтобы мой шаблон отображал элементы списка группами по 4 или по половине общей длины списка Пример: допустим, у меня есть 10 элементов в списке, я хочу, чтобы 5 были справа и 5 слева. Пожалуйста, смотрите скриншот ниже.

This is how i want my page to look like.

[![Но вот что я получил][2]][2] [2]: https://i.stack.imgur.com/zMQdj.png

Это мой HTML файл. 

  <div class="section-title">
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
    </p>
  </div>
  

  {% for skill in skills_list%}  
 
  <div class="row skills-content">
   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

    </div>
  
  
  </div>
  {% endfor %}
</div>

#####################################

views.py
this is the views.py file

#### TEST
class TestView(generic.ListView):
   model = Skills
   template_name = 'portfolio_app/test.html'


########################URL.py
from django.urls import path
from portfolio_app.models import *
from . import views


urlpatterns = [
    path('',views.fact,name='index'),
    #path('index/',views.SkillView.as_view,name='index'),
    path('about/',views.about_me,name='about'),
    path('service/',views.ServiceView.as_view(),name='service'),
    path('resume/',views.ResumeView.as_view(),name='resume'),
    path('contact/',views.ContactView.as_view(),name='contact'),
    path('test/',views.TestView.as_view(),name='test'),

]

Вы можете попробовать переместить <div class="row skills-content"> за пределы цикла for следующим образом:

  <div class="section-title">
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
    </p>
  </div>
  
  <div class="row skills-content">
  {% for skill in skills_list%}   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

    </div>
  {% endfor %}
  </div>
</div>

Используйте slice следующим образом:

  <div class="row skills-content">
  {% for skill in skills_list|slice:":5" %}   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

    </div>
  {% endfor %}

  {% for skill in skills_list|slice:"5:" %}   
    <div class="col-lg-6" data-aos="fade-up">
      <div class="progress">
        <span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

    </div>
  {% endfor %}
  </div>
Вернуться на верх