网页布局决定了内容在页面上的排列方式，是视觉设计实现过程中最基础的环节。传统方式需要手动编写Flex或Grid的CSS代码，反复调整数值才能达到理想效果。AI工具可以通过自然语言描述直接生成对应的布局代码，把“调代码”变成“描述位置”。第二节课通过描述导航栏、多列卡片和页脚的布局需求，让AI生成对应的Flex和Grid布局代码，建立对布局概念的理解。

第一步：用自然语言描述布局需求，让AI生成Flex布局代码。 弹性盒模型用来处理一维方向的元素排列——水平或垂直方向上的对齐和分布。遇到水平导航栏、垂直列表或需要均匀分布的项目组时，首先考虑Flex布局。你可以用日常语言描述需求，比如“导航菜单项在顶部水平均匀排列，Logo靠左，登录按钮靠右”，AI会把这段描述翻译成对应的Flex代码，省去手动设置对齐方式的过程。

第二步：用自然语言描述网格布局需求，让AI生成Grid代码。 网格布局适用于二维布局场景——同时控制行和列的位置与大小。产品展示页、图片画廊、仪表板这类需要行列对齐的页面适合使用Grid。描述“产品卡片以三列网格排列，每列宽度均匀分配，卡片之间留有间距”的要求，AI会生成对应的Grid代码，并自动适配不同的屏幕尺寸。遇到复杂的网格结构时，把需求拆成几部分分别描述，让AI分步生成，然后再组合起来。在描述中明确列数、间距和每个区域的内容类型，可以避免生成过程中产生偏差。

第三步：让AI生成响应式方案，布局在不同屏幕下自适应。 网页需要在不同设备上都有良好的显示效果，响应式设计是实现这一目标的基础方法。在布局完成后，用对话让AI添加响应式样式，比如“在手机屏幕下，三列网格变为单列，导航菜单折叠为汉堡菜单”。AI会在原有代码基础上增加断点设置，覆盖小屏幕下的样式适配。一个完成响应式适配的页面，在不同屏幕尺寸下都能保持良好的可读性和操作体验。你可以调整浏览器窗口大小预览效果，或使用浏览器开发者工具中的设备模拟功能，在手机、平板、桌面等不同屏幕尺寸下测试显示效果。