Как упорядочить контент в виде сетки динамически?

Question

Я хочу устроить следующую Figure1 содержание в поле зрения горизонт сетки, здесь содержание приходит в вертикальное так, как расположить в горизонтальном виде сетки, как Figure2

Figure1:

Figure2:

Здесь мне нужен только класс css в div, пожалуйста, сообщите классу css, чтобы расположить сетку в горизонтальной форме.

jinja2 Шаблоны

_data_grid.html
Этот шаблон, принимает строки (количество данных, как в следующем Figure2 мы имеем 5 данных) и столбцы (Название изображения, тип, статус, общественное , protected, Formate, size, Action). Вся эта информация поступает из базы данных и структуры django.

{% load i18n %} 
{% with table.needs_form_wrapper as needs_form_wrapper %} 
    <div class="table_wrapper"> 
    {% if needs_form_wrapper %}<form action="{{ table.get_full_url }}" method="POST">{% csrf_token %}{% endif %} 
     {% with columns=table.get_columns rows=table.get_rows %} 

      {% block grid %} 
       <grid id="{{table.slugify_name}}"> 
        <div> 
         {% block grid_caption %} 

          <h3 class='table_title'>{{ table }}</h3> 
          {{ table.render_table_actions }} 

         {% endblock grid_caption %} 
        </div> 
        </br> 
        </br> 
        </br> 
        </br> 
        {% block grid_body %} 
         <div> 
          {% for row in rows %} 
          {{ row.render }} 
          {% empty %} 

          {{ table.get_empty_message }} 
          {% endfor %} 
         </div> 
        {% endblock grid_body %} 
       </grid> 
      {% endblock grid %} 
     {% endwith %} 
     {% if needs_form_wrapper %}</form>{% endif %} 
    </div> 
{% endwith %} 

_data_grid_cell.html
Этот шаблон используется для заполнения содержания,

{% if cell.inline_edit_mod and cell.update_allowed %} 

{% else %} 

{% if cell.inline_edit_available and cell.update_allowed %} 

{% else %} 

     <ul>{{ cell.value }}</ul> 
{% endif %} 
{% endif %} 

Answer 1

Если вы хотите, чтобы код CSS-код вашей собственной личности flexbox будет то, что вы ищете. Но будет проще и, вероятно, уборщиком использовать рамки CSS, как Bootstrap, ваш код должен выглядеть Somthing, как это, то вы можете добавить шаблон Джанго тегов:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4"><!--block 1--></div> 
     <div class="col-sm-4 col-md-4"><!--block 2--></div> 
     <div class="col-sm-4 col-md-4"><!--block 3--></div> 
     <div class="col-sm-4 col-md-4"><!--block 4--></div> 
    </div> 
</div> 

Check (Bootstrap Grid) для получения более подробной информации и объяснения для CSS классы.