网格区域在没有定义区域/列/行的情况下工作答案

【问题标题】：Grid area works without defined area / columns / rows网格区域在没有定义区域/列/行的情况下工作
【发布时间】：2020-07-24 01:04:07
【问题描述】：

所以我在做一个小项目，我也能够完成它。在项目结束时，我注意到代码不应该工作，但它正在工作：

let size = 15; //fornow
const con = document.querySelector("#container");
for (i = 0; i < size; i++) {
  for (j = 0; j < size; j++) {
    let box = document.createElement("div");
    box.style.cssText = `grid-area: ${i + 1}/${j + 1}/${i + 2}/${j + 2}`;
    box.classList.add("tile");
    con.appendChild(box);
  }
}

#container {
  height: 50vh;
  width: 50vh;
  border: 4px rgb(216, 216, 216) solid;
  display: grid;
  margin: 50px auto;
}

.tile {
  border: 1px rgb(0, 0, 0) solid;
  background-color: white;
}

&lt;div id='container'&gt;&lt;/div&gt;

当 size 变量被赋予一个值时，一个完美的方形网格被创建，所有的 div 都按行和列排列。我不明白的是我只是写了一个容器display: grid，甚至没有定义任何行列或模板甚至任何网格属性。甚至grid: 'something' 也不见了。

我的代码是如何工作的，并且所有子元素都可以通过使用甚至没有定义最大区域的网格区域属性来完美排列？

我尝试搜索是否有任何默认网格属性，但即使它要求您编写以“网格”开头的内容。

【问题讨论】：

因为您的 JS 为网格的每个图块创建 CSS .tile { grid-area: ... } w3schools: CSS grid-area Property。
@RenevanderLende 是的，但我没有在父容器中定义大小和网格模板/行/列

标签： javascript html css css-grid

【解决方案1】：

我的代码是如何工作的，并且所有子元素都可以通过使用甚至没有定义最大区域的网格区域属性来完美排列？

您无需在容器上定义任何行或列（“轨道”）。

在没有作者定义的（“显式”）轨道的情况下，网格算法会创建自己的（“隐式”）轨道以适应网格区域。

使用您的脚本，您正在创建隐式网格线。

正如您在 CSS 中看到的，grid-area 属性定义了行和列行。因为这些行与任何显式轨道都不匹配，所以会创建隐式轨道。

来自规范：

§ 7.1. The Explicit Grid

三个属性grid-template-rows,grid-template-columns, 和grid-template-areas 一起定义了一个显式网格 网格容器。

但这些属性在代码中不存在。所以 JS 最终会创建隐式行。

§ 7.5. The Implicit Grid

grid-template-rows、grid-template-columns 和 grid-template-areas 属性定义了固定数量的轨道形成显式网格。当网格项目位于这些边界，网格容器生成隐式网格轨迹 向网格添加隐式网格线。

容器的“完美方形”形状是其定义大小 (50vh x 50vh) 的结果。

#container {
  height: 50vh;
  width: 50vh;
  border: 4px rgb(216, 216, 216) solid;
  display: grid;
  margin: 50px auto;
}

【讨论】：