grid

fr

如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

• 第一列的宽度为 150 像素，第二列的宽度是第三列的一半

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

• auto 浏览器自己决定长度

grid-template-columns: 100px auto 100px;

• 12 网格

grid-template-columns: repeat(12, 1fr);

grid