网格项目：自动与定义的放置

Question

我有一个关于 display:grid 属性的问题，特别是关于两列布局的问题。在代码片段中，我设置了一个基本的两列。布局。当你有这样的东西时，只有一个 2fr 部分和一个 1fr 部分，你是否仍然需要分配列开始和跨越的位置，如 grid-column: 1/2; 或者它只是隐含的？

* {
  padding: 0;
  margin: 0;
  font-size: 17px;
}

main {
  width: 1080px;
  margin: 0 auto;
  border: 1px solid;
  height: 100%;
  min-height: 500px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-rows: auto;
  grid-gap: 20px;
}

article {
  border: 1px solid;
  //grid-column: 1/2;
}

.sidebar {
  border: 1px solid;
  //grid-column: 2/3;
}

<main>
  <article></article>
  <aside class="sidebar"></aside>
</main>

Answer 1

CSS 网格布局有一个叫做 Grid Item Placement Algorithm 的东西。

该算法定义了一个基于各种因素布置网格项的过程。

例如，源顺序很重要。您有一个两列的网格和两个网格项目，并且 order 属性不在游戏中，因此这些项目按照它们在 HTML 中出现的顺序排列。

此外，grid-auto-flow属性的初始设置是row。这意味着默认情况下，网格项目是水平呈现的。如果将值更改为 column 或 dense，布局会发生变化。

有关完整的解释和考虑因素的列表，请参阅：

8.5. Grid Item Placement Algorithm

The following grid item placement algorithm resolves automatic positions of grid items into definite positions, ensuring that every grid item has a well-defined grid area to lay out into.

网格项目：自动与定义的放置

Grid items: automatic vs defined placement

html

css

css-grid