时间戳

首页 > 解决方案 > 如何在不使用单独的应用程序布局文件的情况下在 DRY 网格布局之间切换？

html - 如何在不使用单独的应用程序布局文件的情况下在 DRY 网格布局之间切换？

问题描述

我正在重新设计一个新的 Rails Web 应用程序并使用 CSS Grid 创建了一个 2 列和 3 列布局（因为某些页面应该有 2 列和其他 3 列）：

我的 CSS：

  .container-3-col {
    display: grid;

    grid-template-areas:
      "header header header"
      "nav content side"
      "footer footer footer";

    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;

    height: 100vh;
  }
  .container-2-col {
    display: grid;

    grid-template-areas:
      "header header"
      "nav content"
      "footer footer";

    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;

    height: 100vh;
  }

我想出了这个 HTML (ERB-) 正文：

<body>

  <% if defined? @no_side_menu %>
    <!-- Grid Layout 2 columns-->
    <div class="container-2-col">
      <header>
      </header>
      <nav>
      </nav>
      <main>
      </main>
      <footer>
      </footer>
    </div>
  <% else %>
    <!-- Grid Layout 3 columns-->
    <div class="container-3-col">
      <header>
      </header>
      <nav>
      </nav>
      <main>
      </main>
      <aside>
        side menu column
      </aside>
      <footer>
      </footer>
    </div>
  <% end %>

</body>

我想在 if 条件之外提取 HTML-Elements 页眉、导航和页脚，但这与container-3-col和container-2-coldiv 冲突。还有另一种方法可以使这个更干燥吗？

标签： htmlcssruby-on-railsflexbox

解决方案

在考虑了一段时间之后，我在不更改 CSS 的情况下得出了以下解决方案：

<div class="<%= @no_side_menu ? 'container-2-col' : 'container-3-col' %>">
  <header>
    Header content
  </header>

  <nav>
    <%= render partial: 'spree/shared/taxonomies' %>
  </nav>

  <main>
    <%= yield %>
  </main>

  <% unless @no_side_menu %>
    <aside>
    </aside>
  <% end %>

  <footer>
    <%= render partial: 'spree/shared/footer' %>
  </footer>
</div>

如果有人有更好的解决方案，请随时在此处发布。

推荐阅读