在首页布局优化中，需将精品教程推荐恢复为左图右文的横向卡片样式，外层采用2列网格，实现一行两个、共两行显示；工具推荐保持上图下文，一行三个不变。同时提醒移动端需单独适配，避免卡片拥挤。
核心问题
如何恢复精品教程推荐为左图右文、一行两个、共两行的两列网格布局？
背景
在首页内容区域，精品教程推荐和工具推荐是两个重要的展示模块。近期我们对首页布局进行了调整，其中精品教程的展示形式发生了变化，需要恢复为之前更受欢迎的样式；工具推荐则保持现有设计。
需求说明
- 精品教程推荐：恢复为“左图右文”的横向卡片布局，每个卡片左侧显示教程封面图，右侧显示标题、简介、章节数和浏览量等信息。模块整体保持两列网格，一行显示两个卡片，总共展示两行（即4个教程）。
- 工具推荐：维持“上图下文”的布局，即图片在上方，标题在下方，一行显示三个。
调整内容
精品教程推荐
-
卡片内部
- 采用横向 flex 布局，左侧为图片，右侧为文字信息区。
- 文字区包含课程标题（加粗）、简短描述、章节数、浏览量等辅助信息。
- 图片和文字区域的比例保持视觉平衡，图片固定宽度或比例，右侧文字自适应。 -
外层网格
- 使用 CSS Grid 或 Flex 实现两列等宽排列，并限制每行只显示两个卡片。
- 总数量固定为4个，若数据超过4个，需截断或增加“查看更多”链接（本期未涉及）。
- 间距设置合理，保证卡片之间不拥挤，与页面整体风格一致。 -
响应式考虑
- 在移动端，两列可能过窄，导致卡片内容难以阅读，后续可单独优化为单列或调整文字大小。
工具推荐
- 维持原有布局：每个工具占一行三分之一宽度，图片居中显示在上方，标题在下方居中。
- 一行显示三个，超出换行。
实现效果
刷新首页后，精品教程展示区将呈现清晰的左图右文两列网格，视觉上更紧凑且信息突出；工具推荐保持简洁的图片+标题风格。
移动端提示
若手机屏幕较窄，教程卡片可能出现文字挤压或图片过小的情况。可以通过媒体查询，在小屏下将两列改为单列，并适当调整内部图文宽度，以提升移动端浏览体验。
总结
本次调整仅涉及布局样式的还原与维持，不改变数据获取和后端逻辑。通过清晰的 CSS 控制，恢复了精品教程推荐的横向卡片风格，保持了工具推荐的简洁展示，同时预留了移动端优化的空间。