原型确定后，下一步是布局实现。布局决定了内容在页面上的排列方式——导航栏怎么排、产品卡片怎么分布、图文如何组合。这节课用自然语言描述布局需求，AI生成对应的Flex和Grid代码。

Flex布局：一维排列的解决方案。 Flex适用于水平或垂直方向上的单行/单列排列，比如导航菜单、图标列表、按钮组。描述“导航菜单项在顶部水平均匀分布，Logo靠左，登录按钮靠右”，AI会生成对应的Flex代码，自动处理对齐方式和间距分配。Flex适合处理一维方向的排列问题，内容在一条轴上分布时使用Flex最直接。

Grid布局：二维网格的排列方案。 Grid适用于行列并存的二维布局，比如产品展示页、图片画廊、仪表板。描述“产品卡片以三列网格排列，每列宽度均匀，卡片之间留有间距”，AI会生成对应的Grid代码。Grid适合处理需要行列对齐的二维排列问题，当页面需要同时控制行和列的位置时使用Grid能够更完整地表达布局意图。

用AI生成响应式布局方案。 布局需要在不同屏幕尺寸下自适应。描述“在手机屏幕上，三列网格变为单列，导航菜单折叠为汉堡菜单”，AI会在原有布局代码基础上增加对应的响应式样式。AI能够根据设备尺寸调整布局方案，确保在手机、平板、桌面等不同屏幕尺寸下都能保持良好的显示效果。