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 Layout有一个名为Grid Item Placement Algorithm的东西。

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

例如，源订单很重要。您有一个双列网格和两个网格项，并且order属性不在播放中，因此这些项目按照HTML中的外观顺序排列。

此外，grid-auto-flow属性的初始设置为row。这意味着默认情况下网格项水平渲染。如果您将值更改为column或dense，则布局会更改。

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

8.5. Grid Item Placement Algorithm

以下网格项放置算法自动解决   网格项目的位置到确定的位置，确保每一个   网格项目具有明确定义的网格区域。

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

1 个答案: