如何动态地将内容排列到网格视图中？

Question

我想将以下图1 内容安排到水平网格视图中，这里内容进入垂直方式，如何排列成水平网格视图，如图2

如图一：

Figure2 ：

这里我只需要div中的css类，请告诉css类将网格排列成水平格式。

Jinja2模板

_data_grid.html
这个模板，取行（数据的数量，如下图2中我们有5个数据）和列（图像名称，类型，状态，公共，受保护，Formate，大小，动作），所有这些信息来自数据库和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将是你想要的。但是使用像Bootstrap之类的css框架我会更容易也可能更干净，你的代码应该看起来像这样，然后你可以添加django模板标签：

<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>

检查（Bootstrap Grid）以获取有关css类的更多详细信息和说明。