网格，逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes

CSS Grid Layout: CSS Grid, Logical Values and Writing Modes

在这些指南中，我已经讨论了网格布局的一个重要特性：支持规范中内置的不同编写模式。对于本指南，我们将研究网格和其他现代布局方法的这一特性，学习一些关于编写模式和逻辑与物理属性的知识。

逻辑和物理属性和值

css充满了物理定位关键字-左和右，上和下。如果我们使用绝对定位定位一个项目，我们使用这些物理关键字作为偏移值来推送项目。在下面的代码片段中，项目从顶部放置20个像素，从容器左侧放置30个像素：

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 20px;
  left: 30px;
}

<div class="container">
  <div class="item">Item</div>
</div>

另一个可能会看到物理关键字的地方是在使用text-align: right右对齐文本时。CSS 中也有物理属性。我们增加利润率，填充和边框使用的这些物理特性margin-left，padding-left等。

我们称这些关键字和属性为物理因为它们与你正在看的屏幕有关。不管你的文字运行的方向是什么，左总是左。

当开发一个必须以多种语言工作的站点时，这可能会成为一个问题，包括从右侧开始的语言，而不是从左边开始的语言。浏览器非常擅长处理文本方向，甚至不需要在RTL语言来看看。在下面的例子中，我有两个段落。一个人没有text-align属性集，第二个text-align向左转。我增加了dir="rtl"到html元素，该元素从英文文档的默认情况下切换写入模式。ltr您可以看到，由于text-align价值存在left然而，第二步，切换方向，文本从右到左运行。

这是CSS中使用的物理值和属性问题的一个非常简单的例子。它们阻止浏览器完成转换写入模式的工作，因为它们假设文本从左向右、从上到下流动。

逻辑属性和值

逻辑属性和值不对文本方向作出假设。这就是为什么在网格布局中我们使用关键字start当对齐某物时，容器的开始。对我来说，用英语工作，start很可能在左边，但不必是，而且这个词start推断不出物理位置。

块和内嵌

一旦我们开始处理逻辑属性，而不是物理属性，我们就不再把世界看作是从左到右，从上到下。我们需要一个新的参考点，这就是理解块和内联我们以前在指南中见过的对齐变得非常有用。如果您可以开始从块和内联的角度来查看布局，那么网格中的工作方式就会变得更有意义。

CSS写作模式

我将在这里介绍另一个规范，我将在我的示例中使用它：CSS编写模式规范。这个规范详细说明了如何在CSS中使用这些不同的写作模式，不仅是为了支持与英语有不同写作模式的语言，而且也是为了创造性的目的。我会用writing-mode属性对应用于网格的写入模式进行更改，以演示逻辑值是如何工作的。但是，如果您想深入研究写作模式，那么我建议您阅读jen simmon关于以下内容的优秀文章：CSS写作模式这比我们在这里要讨论的要深入得多。

书写方式

书写模式不仅仅是从左到右和从右到左的文本，而且该writing-mode属性可以帮助我们显示在其他方向上运行的文本。该writing-mode属性可以具有以下值：

horizontal-tb

vertical-rl

vertical-lr

sideways-rl

sideways-lr

horizontal-tb是Web上文本的默认值。这是您阅读本指南的方向。其他属性将改变文本在我们文档中的流动方式，与世界各地的不同书写模式相匹配。同样，有关这些的全部细节，请参阅Jen的文章。作为一个简单的例子，我有两个段落。第一个使用默认值horizontal-tb，第二个使用vertical-rl。在模式中，文本仍然从左到右，但是文本的方向是垂直的 - 内嵌文本现在从上到下遍布页面。

<div class="wrapper">
   <p style="writing-mode: horizontal-tb">I have writing mode set to the default <code>horizontal-tb</code></p>
  <p style="writing-mode: vertical-rl">I have writing mode set to <code>vertical-rl</code></p>
</div>

网格布局中的写入模式

如果我们现在看一个网格布局示例，我们就可以看到更改写入模式意味着改变块和内联轴的位置。

下一个例子中的网格有三列和两行轨迹。这意味着有三个轨道沿着块轴运行。在默认的写入模式下，网格自动放置从左上角开始的项目，向右移动，填充内联轴上的三个单元格。然后移动到下一行，创建一个新行轨道，并填充更多项：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px
  grid-template-rows: repeat(2, 100px
  grid-gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

如果我们加上writing-mode: vertical-lr对于网格容器，我们可以看到块和内联轴现在正以不同的方向运行。街区或列Axis现在从左到右在页面上运行，内联从上到下运行，从上到下创建行。

.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px
  grid-template-rows: repeat(2, 100px
  grid-gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

用于对齐的逻辑值

随着块和内联轴能够改变方向，对齐属性的逻辑值开始变得更有意义。

在下一个示例中，我正在使用对齐来对齐设置为的网格内的项目writing-mode: vertical-lr。在start与end以完全相同的方式，他们在默认的书写模式做性工作，并在使用左，右，顶部和底部对齐的项目不会做的方式保持逻辑。这发生在我们将网格翻转到一边时，就像这样：

.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 1fr
  grid-template-rows: repeat(3, 100px
  grid-gap: 10px;
}

.item1 {
    grid-column: 1 / 4;
    align-self: start;
}

.item2 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    align-self: start;
}

.item3 {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: end;
    justify-self: end;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

如果您想了解这些内容是如何工作的，请从右到左，以及从上到下的写入模式，请切换。vertical-lr到vertical-rl，这是一种从右到左运行的垂直写入模式。

自动放置和书写模式

在已经显示的示例中，您可以看到写入模式如何改变项目放置到网格上的方向。默认情况下，项将沿内联轴放置，然后移动到新行。但是，内联轴可能并不总是从左到右运行。

线基布局与写作模式

在按行编号放置项目时，要记住的关键是，第1行是开始行，无论您采用哪种书写模式。第1行是终端线，无论你采用哪种写作方式.

在下一个例子中，我有一个默认的网格ltr方向。我已经定位了三个项目使用线基础的安置。

项目1从第1列开始，跨越一个轨道。

第2项从第1栏开始，从第3栏开始。

第3项从第1列开始，跨越第3列。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr
  grid-template-rows: repeat(2, 100px
  grid-gap: 10px;
}
.item1 {
    grid-column: 1 ;
}
.item2 {
    grid-column: -1 / -3;
}
.item3 {
    grid-column: 1 / 3;
    grid-row: 2;
}

<div class="wrapper">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>

如果我现在添加direction属性的值为rtl对于网格容器，第1行成为网格的右边，第1行在左边。

.wrapper {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(3, 1fr
  grid-template-rows: repeat(2, 100px
  grid-gap: 10px;
}
.item1 {
    grid-column: 1 ;
}
.item2 {
    grid-column: -1 / -3;
}
.item3 {
    grid-column: 1 / 3;
    grid-row: 2;
}

<div class="wrapper">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>

这说明了，如果您正在切换文本的方向，无论是对整个页面还是对部分页面，并使用行：如果您不希望布局完全切换方向，则可能希望命名您的行。例如，在某些情况下，网格包含文本内容，这种切换可能正是您想要的。对于其他用途，它可能不会。

值的奇怪顺序grid-area财产

您可以使用grid-area属性将网格区域的所有四行指定为一个值。当人们第一次遇到这种情况时，他们常常感到惊讶的是，这些值没有遵循与保证金的缩写相同的顺序--即按顺时针方向运行：上、右、下、左。

grid-area值的顺序是：

grid-row-start

grid-column-start

grid-row-end

grid-column-end

对英语来说，从左到右的顺序是：

top

left

bottom

right

这是逆时针方向的百分之二十一，所以，我们做的毛边和填充相反。一旦你意识到grid-area把世界看成是“阻塞和内联”，你可以记住，我们设置的是两个起点，然后是两端。一旦你知道了%21就变得更符合逻辑了

混合书写模式与网格布局

除了显示文档，使用正确的语言书写模式，还可以在其他文档中创造性地使用写作模式。ltr在下一个例子中，我有一个带有一组链接的网格布局。我使用了写作模式，在列轨中将这些内容转到了他们的一边：

.wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr auto;
    font: 1em Helvetica, Arial, sans-serif;
}
.wrapper nav {
    writing-mode: vertical-lr;
}
.wrapper ul {
    list-style: none;
    margin: 0;
    padding: 1em;
    display: flex;
    justify-content: space-between;
}
.wrapper a {
    text-decoration: none;
}

<div class="wrapper">
        <div class="content"> 
            <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
        </div>
        <nav>
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
            </ul>
        </nav>
    </div>

物理值和网格布局

在构建网站时，我们经常会遇到物理属性，虽然网格布局和对齐属性和值尊重写入模式，但有些事情可能会迫使您使用物理属性和值。在指南中箱形对齐和网格，我演示了在网格区域中自动边距是如何工作的。使用自动边距将一个项目从其他项目推开也是一个常见的柔性盒技巧，但是这也将布局与物理空间联系在一起。

如果在网格区域内使用绝对定位，那么您将再次使用物理偏移量来推动网格区域内的物体。关键是要意识到，物理和逻辑属性和价值之间的紧张关系。例如，请注意，您可能需要对CSS进行更改以应付从切换ltr到rtl。

一切的逻辑属性！

我们的新布局方法使我们能够使用这些逻辑值来放置项，但是，一旦我们开始将它们与用于边距和填充的物理属性结合起来，我们就需要记住，这些物理属性不会根据写入模式而改变。

CSS属性的逻辑规范旨在改变这种状况，在未来，我们将能够使用逻辑等价物的属性，如margin-left和margin-right，在我们的CSS。Firefox已经实现了这些，所以你现在可以在Firefox中试用它们了。我知道将来，一旦这些东西到处都是，通过使用Grid，你对“Block and inline”的了解，意味着你也知道如何使用这些。