计算机英语第3句：grid 布局中的 area

lefex

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-07-17 23:26:08 发布 320 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

今天的句子是关于 CSS 布局中的 grid 布局。

1.句子

In the previous guide we looked at grid lines, and how to position items against those lines. When you use CSS Grid Layout you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout!

来自：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

2.关键词解析：

previous guide：上一篇指南，guide 经常会遇到，可以理解放指南；

looked at：查看，作者的意思是上一篇指南中学习了网格线；

against：依赖；

straightforward：简单的，容易的，直接的；

alternate：可替换的；

combination with：与.......相结合；

involved：包含、需要、牵涉、加入；

exactly：确切地，准确地；

involved：包含

3.译文

在上一篇指南中我们研究了网格线，以及如何根据网格线定位项目（grid item）。在使用网格布局的时，因为总会有网格线，所以使用网格线定位项目是最直接的方法。不过，还有一种方法可以定位项目，它可以单独使用，也可以把它和基于网格线的定位结合起来。这种方法需要涉及到使用模板区域命名来定位项目，接下来我们将弄清楚这种方法如何使用。很快你就会明白在网格布局中为什么我们称这种方法为 ASCII艺术方法。

4.打卡指令（任意一个）：

<1>自己翻译试试。
<2>.自由发挥，有什么想说的，欢迎留言交流。
<3>.直接打卡吧！！！