CSS 网格布局等于 WPF 网格答案

【问题标题】：CSS grid layout equal to WPF gridCSS 网格布局等于 WPF 网格
【发布时间】：2019-01-23 09:44:28
【问题描述】：

我正在运行时在我的窗口中生成一个 WPF 网格，如下所示：

      <Grid Height="500"  Width="1000" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
            </Grid>

所以第一、第三和第四列的宽度将是第二列的一半。

我想做的是在 ASP.NET Webforms 应用程序中生成一个 CSS 布局，该应用程序具有相同的布局，最好也针对智能手机和平板电脑进行了优化。我通常使用引导程序，它提供了一种非常有效的生成布局的方法。例如：

<div class="row">
  <div class="col-1">col</div>
  <div class="col-2">col</div>
  <div class="col-1">col</div>
  <div class="col-1">col</div>
</div>

不幸的是，在这个例子中没有办法做到这一点，因为引导布局有一个 12 列的网格，如上例所示，宽度永远不会被填充，因为列绑定到网格布局。如何做到这一点？是否需要其他库也没关系。

编辑：

列数可能会有所不同，并且单个页面上可能有多个列数不同的网格。此外，宽度 1*,2*,1*,1* 只是一个示例。它也可能类似于 5*,2*,2*,1*,1* （第一列是最后两列宽度的 5 倍，第 2 列和第 3 列是最后两列宽度的两倍）

【问题讨论】：

您并没有完全固定在 12 列。 stackoverflow.com/questions/26572922/… 但我认为如果你能侥幸成功的话，只使用百分比会更直接。
输入好！谢谢！不过，我应该提到的是，上面的 WPF 网格只是一个示例。网格列可能会有所不同。所以我不得不假设列的数量并不总是相同的。此外，可能存在具有不同列数的多个网格。所以调整引导网格布局是不可能的，除非你计算网格布局，使它在运行时适合每个网格，这对我来说似乎很hacky。

标签： html css wpf twitter-bootstrap

【解决方案1】：

CSS 网格应该让你做一些非常类似于 WPF 网格的事情。将上述内容转换为 CSS 网格可以像这样简单：

<div class="grid">
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <!-- however many cells -->
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}

这将为您提供一个布局，其中第二列的宽度是其余列的两倍。如果列模板中指定的行数超过 4，.grid 的子代将自动将自己排序到行中。所以 8 个孩子会做 2 行，16 个孩子会做 4 行，9 个孩子会做两行整行，一行 1 列，以此类推。

【讨论】：

【解决方案2】：

如果您想要自适应 UI 和灵活的网格大小而不需要从头开始编写所有内容，那么 Bootstrap 有许多替代方案。我建议你先看看 Pure.css https://purecss.io/grids/

我认为其他几个选项也遵循 12 列公式。例如，简单的网格。 https://www.agriya.com/blog/15-alternatives-bootstrap-foundation-skeleton/

如果您不喜欢其中任何一个，那么您可以考虑使用 flexbox。如果你不习惯使用它，那么这个页面会给你一个味道： https://css-tricks.com/dont-overthink-flexbox-grids/ 那有固定的宽度。不同的开发者对于使用百分比还是固定宽度有不同的偏好。当然还有最小宽度和最大宽度。

如果 css 和 html 对您来说相当新，并且您在办公桌/笔记本电脑上，请缩小此页面的宽度并看看会发生什么。

【讨论】：

【解决方案3】：

网格模板列：1fr 2fr 1fr 1fr;

通过将父DIV的显示属性设置为grid，然后将上面的CSS属性设置为第一个、第三个和第四个单元格将是父级DIV中第二个单元格大小的一半。

【讨论】：