时间戳

首页 > 解决方案 > 是否可以将 CSS Grid 与 Ionic 一起使用？

html - 是否可以将 CSS Grid 与 Ionic 一起使用？

问题描述

几个月以来我一直在测试 angular + ionic，并且我使用了很多<ion-grid>. 但是由于我正在做一个可以在桌面和移动设备上使用的应用程序，所以有时我需要非常不同的布局，而且我发现有时使用 ion-grid组件的 flexbox 方法很难实现这一点。

有没有办法在 ionic 内部使用 CSS 网格（ https://css-tricks.com/snippets/css/complete-guide-grid/ ）？这将使一些布局更容易。

这是否由 Ionic 直接支持？或者这是否需要我直接在 CSS 中制作？Ionic 不直接支持它的缺点是什么？

标签： htmlcssionic-frameworkcss-gridion-grid

解决方案

在 ionic 中，没有什么可以强迫您只使用 ionic 元素，使用这些元素的目的是让用户更容易更快地工作。因此，不要使用引导程序来制作网格布局，例如：

<div class="blabla">
    <div class="row">
        <div class="col-6 col-sm-12 ..."></div>
    </div>
</div>

所以 ion-grid 或 ion-row 或 ion-col 只是为了让用户更快地使用，但如果它是为了在 ionic 和 bootstrap 中的默认元素之间获得更好的性能，那么在 ionic 元素中肯定会更好，但如果你可以在不使用引导库并仅使用 css 的情况下实现您的事情，那么它不会有任何不同，因为 css 是 ionic 的一部分，而不是添加 css 文件的您，因此使用 css 和 html 普通元素（如 div）非常正常在没有离子元素的情况下实现游览结果。

推荐阅读