特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)
前面和大家一起讨论的都是在物理属性和ltr（Left-To-Right）书写模式（或阅读模式）下的网格布局。接下来，在这部分将和大家一起探讨网格布局遇上逻辑属性和书写模式下的表现。
逻辑属性与物理属性及逻辑值与物理值
对于大多数 Web 开发者（或 CSSer）而言，更为熟悉的是物理属性，比如width、height、top、right、bottom、left等。但我们在图解 CSS 系列中的《CSS逻辑属性》一章中和大家聊过 CSS 逻辑属性和逻辑值，以及逻辑属性与物理属性，逻辑值与物理值之间的对应关系：
这么多年以来，在开发Web的时候用得都是物理属性为主，即使在开发多种语言的网站时，也主要采用物理属性和对应的物理值，只不过相对麻烦一些：
比如说，下面这样的两种不同语言版本的布局效果：
需要在 <html> 元素上添加 dir="rtl" 声明，然后在不同的两种语言方式下设置样式：
.avatar {
margin-right: 1rem;
}
html[dir="rtl"] .avatar {
margin-right: 0;
margin-left: 1rem;
}
但如果我们换成CSS逻辑属性，这一切会变得简单地很多：
.avatar {
margin-inline-end: 1rem;
}
一行代码就可以达到想要的效果：
有关于多语言排版更详细的介绍，可以阅读《Web中向左向右》一文。
正如上面示例所示，逻辑属性和值不会预设方向，这也是为什么网格布局中要实现对齐到容器开始位置时使用start关键字的原因。对于我们来说（汉语），习惯了从左往右的书写和阅读方式（ltr），所以start就是左侧，不过这并不是说它总是代表左侧，并不能根据start这个词推断出物理位置。
块和行内
如果我们用逻辑属性不用物理属性时，就不能仅使用从左到右，从上到下的方式观察世界，我们需要新的参考点，也就是在介绍网格布局中重要术语和概念的时候专门介绍的块轴（Block Axis）和行内轴（Inline Axis）。理解它们是非常重要的，如果开始用块轴与行内轴的方式来看到布局，在网格布局中使用到的术语就变得非常有意义了。
书写模式
CSS 书写模式是 CSS的一个独立的模块，详细描述了如何在 CSS 中使用多种不同的书写模式，不仅是支持与汉语不同书写模式的语言，而且还提供了更富创造性的用途。通过使用writing-mode属性来改变书写模式：
正如上图所示，CSS 的 writing-mode 不仅可以使用文字从左到右或从右到左显示，还可以设置其他的文字流动方向。该属性可选的值主要有horizontal-tb、vertical-rl、vertical-lr、sideways-rl和sideways-lr。
writing-mode能很好的和块轴、行内轴、阅读模式以及书写模式结合起来：
我们可以换过一种方式来理解：
- 块轴：主要定义网站文档（元素块）流，CSS的书写模式
writing-mode会影响块轴的方向 - 内联轴：主要定义网站的文本流方向，也就是文本的阅读方式，CSS的
direction或HTML的dir会影响内联轴的方向
接下来，将通过使用writing-mode属性来改变网格的书写模式，演示逻辑值是如何工作的。
网格布局中的书写模式
为了更好的阐述书写模式是如何改变你对块轴和行内轴的看法，我们通过示例来展示，这样更易于理解。比如：
.grid__container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
使用 grid-template-columns 和 grid-template-rows 显式定义了一个两行三列的网格，也就是说有三个沿着行内轴方向（文本方向的行轴）的轨道，即网格列轨道，两个沿着块轴方向（块方向的列轴）的轨道，即网格行轨道。在默认的书写模式下（ltr，或 writing-mode为horizontal-tb），网格自动定位网格项目的流向，是从左上角开始，向右延伸，填满行内轴方向的三个格子，然后转到下一行，创建一个新的行轨道，继续放置更多的网格项目：
如果我们给网格容器加上
如需转载，烦请注明出处：https://www.w3cplus.com/css/grid-layout-part-14.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
