如何使用CSS网格实现响应式布局

Question

我想使用响应式CSS网格实现图1中的布局。
元素A，B，C，D，E-具有不同的内容（该内容与下图中的方框大小成比例）

每个元素框的大小应根据内容设置 我正在尝试避免使用强硬的@media声明

我尝试定义具有重复，自动填充和适合内容的grid-template-columns，但没有得到理想的结果 我碰到了this链接，它对此进行了解释

  

“自动重复（自动填充或自动调整）不能与   固有的或灵活的尺寸（例如，合适的内容）”

我还尝试定义具有重复，固定宽度的grid-template-columns，并为元素分配跨度： “网格列：1 /跨度3;” 也无法给出期望的结果。

是否可以使用CSS网格实现这种布局？
如果没有，那么最简单的方法是什么（嵌套的CSS网格，Flexbox和CSS网格的组合？）

谢谢

Answer 1

我个人将使用一系列嵌套的CSS网格并利用CSS网格支持的@media。然后使用@media查询来更改较小视口上的网格布局。

使用CSS Grid，您可以为网格区域指定实际名称，并为特定区域分配特定元素，然后使用.my-grid { display: -ms-grid; display: grid; grid-template-areas: "area1 area2" "area3 area2"; } .my-grid-item-a1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: area1; } .my-grid-item-a2 { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; grid-area: area2; } .my-grid-item-a3 { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: area3; } 查询，您可以移动区域，并且在调整页面大小时内容将自动移动

grid-area

上面的代码将生成此网格：

您需要的一切都可以在这里找到：CSS-Tricks CSS Grid

注意：Internet Explorer不支持<RadioGroup android:id="@+id/radiogroup" android:layout_width="match_parent" android:layout_height="match_parent"> <RadioButton android:id="@+id/radio0" android:layout_margin="10dp" android:drawableRight="@drawable/ic_launcher_background" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioButton android:id="@+id/radio1" android:layout_margin="10dp" android:drawableRight="@drawable/ic_launcher_background" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RadioGroup> ，但是您可以使用 AutoPrefixer 解决此问题。