CSS页面布局

页面整体布局

整体布局通常根据css中的属性display来进行选择

• flex

display: flex;

• grid

display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px; /* 网格项之间的间距 */
padding: 10px;

grid-template-columns属性可以的表示方法：

1. 使用 fr 单位
   fr 单位表示可用空间的一个比例份额。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，第一列和第三列占1份，第二列占2份 */
}

2. 使用固定宽度
   可以使用像素、百分比、em、rem 等固定单位定义列的宽度。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 300px; /* 三列，固定宽度 */
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%; /* 两列，各占50%宽度 */
}

3. 使用自动宽度
   使用 auto 关键字，列的宽度根据其内容自动调整。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 三列，宽度由内容决定 */
}

4. 使用 repeat() 函数
   repeat() 函数简化了重复列定义的语法。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列占1份宽度 */
}

5. 使用 minmax() 函数
   minmax() 函数定义列的最小和最大宽度。

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr); /* 两列，第一列最小100px最大1份，第二列最小200px最大2份 */
}

6. 混合使用
   可以混合使用不同的单位和函数来创建复杂的布局。

.grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr 2fr; /* 四列，第一列200px，第二列自动，第三列和第四列占比例宽度 */
}

7. 使用 fit-content()
   fit-content() 允许列根据内容自动调整宽度，但不会超过指定的最大值。

.grid-container {
  display: grid;
  grid-template-columns: fit-content(100px) fit-content(200px); /* 两列，宽度根据内容调整，但不会超过100px和200px */
}

8. 使用 max-content 和 min-content
   max-content 根据内容的最大宽度设置列宽，min-content 根据内容的最小宽度设置列宽。

.grid-container {
  display: grid;
  grid-template-columns: max-content min-content; /* 两列，第一列最大内容宽度，第二列最小内容宽度 */
}