CSS网格布局等同于WPF网格布局

Question

我正在运行时生成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布局，最好能够优化智能手机和平板电脑的显示效果。 我通常使用Bootstrap来生成布局，它提供了一种非常有效的生成布局的方式。例如：

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

很遗憾，在这个例子中，没有办法做到这一点，因为Bootstrap布局有12列网格，并且如上面的例子所示，宽度永远不会被填满，因为列宽受到网格布局的限制。如何实现呢？是否需要其他库并不重要。

编辑：列数可能会有所变化，一个页面上可能会有多个具有不同列数的网格。此外，1*、2*、1*、1* 的宽度只是一个例子。它也可能是像 5*、2*、2*、1*、1* 这样的东西（第一列的宽度是最后两列的五倍，第二列和第三列是最后两列的两倍）。

- colosso

---

你不必完全固定在12列上。但是我认为，如果可以的话，只使用百分比会更直接。https://stackoverflow.com/questions/26572922/bootstrap-griding-columns-proportions - Andy

好的输入！谢谢！虽然，我应该提到的是，上面的WPF网格只是一个例子。网格列可能会有所不同。因此，我必须假设列数并不总是相同的。此外，可能会有多个具有不同列数的网格。因此，在运行时调整引导程序网格布局不是一种选择，除非您计算网格布局以适应每个网格，这对我来说似乎非常繁琐。 - colosso

Answer 1

CSS grid应该让你能够做类似于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;
}

这将为您提供一个布局，其中第二列的宽度是其他列的两倍。如果.grid的子元素超过了模板中指定的4个，则它们会自动排序成行。因此，8个子元素会生成2行，16个子元素会生成4行，9个子元素会生成两个完整的行和一个只有1列的行等等。

- Miles Grover

Answer 2

如果你想要自适应的UI和灵活的网格尺寸，而不必从头开始编写所有内容，那么Bootstrap有许多替代品。我建议你首先看看Pure.css。 https://purecss.io/grids/ 我认为还有其他几个选项也遵循12列公式。例如，simple grid。 https://www.agriya.com/blog/15-alternatives-bootstrap-foundation-skeleton/ 如果你不喜欢它们中的任何一个，那么你可以考虑使用flexbox。如果你不习惯使用它，那么这个页面会给你一些启示： https://css-tricks.com/dont-overthink-flexbox-grids/它具有固定宽度。不同的开发人员对于是使用百分比还是固定宽度有不同的偏好。当然，还有min-width和max-width。如果CSS和HTML对你来说相对较新，并且你在台式机/笔记本电脑上，请缩小此页面的宽度并查看会发生什么。

- Andy

Answer 3

grid-template-columns: 1fr 2fr 1fr 1fr;

将父级 DIV 的 display 属性设置为 grid，然后添加上述 CSS 属性，可以使您的网格中第一、第三和第四个单元格的大小为父级 DIV 中第二个单元格大小的一半。

- Maaz Ali