30 网格（Grid）和弹性盒（Flexbox）综合示例
服务板块 示例 30a
示例模板来自 Inovatik
这是 Inovatik 模板中一个以网格格式呈现的响应式服务板块。在移动屏幕上，两列会合并为一列。这是网格布局中使用弹性盒的绝佳示例。
在桌面端，整个板块是一个两列三行的网格，网格流向为列。每个服务项都是一个弹性容器，图标和文本是弹性项目。
**提示：**对网格使用grid-rows-*和grid-flow-col工具类。并将每个网格项设置为弹性容器。
推特月度总结卡片 示例 30b
示例由 Naresh 提供
看看这张卡片，它展示了一个推特账号的月度总结以及一些个人资料信息。这是在一个组件中同时使用弹性盒和网格的优秀示例。
头部部分最好用弹性容器实现，不过你也可以选择使用网格。最后的统计信息是一个简单的两列两行网格布局。
**提示：**在弹性盒中使用items-*工具类和自动外边距。将粉丝头像的排列方向设为row-reverse。对于网格，直接使用grid-col-*和gap工具类。
我还没有让这个响应较小的屏幕。你可以自己试试。
社交媒体仪表盘 示例 30c
Frontend Mentor 挑战的一部分
这个示例来自社交媒体仪表盘挑战，是网格套网格的出色范例。
整个仪表盘使用网格布局，然后将每个网格项也设置为网格容器。
**提示：**使用grid-cols-*、justify-*、content-*、justify-self -*、self-*和gap工具类。
查看/*important*/注释下的 CSS 选项卡获取解决方案。我尚未为小屏幕实现响应式设计，你可以自行尝试。