Pressidian

Appearance

Grid ​

css
.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px; // 这里是空格，不是逗号
  grid-gap: 10px;
  justify-content: cenbter;
  align-content: cenbter;

  background-color: #2196F3;
  padding: 10px;
}

左侧固定、右侧自适应 ​

---  css 如何实现左侧固定300px，右侧自适应的布局

提供 flex 与 grid 布局的两种思路

  • flex:
    • 左侧: flex-basis: 200px
    • 右侧: flex-grow: 1; flex-shrink: 0;
  • grid
    • 父容器: grid-template-columns: 200px 1fr;
.container  .left  .main
.container {  display: grid;  grid-template-columns: 300px 1fr;}

在 CSS Grid 布局中，fr 是一个灵活的长度单位，全称为 "fraction"（分数），用于按比例分配网格容器中剩余的可用空间。

在 grid-template-columns: 1fr 1fr 1fr 中，fr 的作用可以拆解为：

1. fr 的核心含义 fr 表示网格容器中 “剩余空间” 的等分份数。

  • 当设置 1fr 1fr 1fr 时，网格容器的可用空间会被平均分成 3 份，每列各占 1 份。
  • 例如：如果容器宽度为 900px，三列会各占 300px（900 ÷ 3 = 300）。
  1. 与固定单位的配合

fr 会先扣除固定长度后再分配剩余空间，非常灵活：

css

css
/* 总宽度 = 200px（固定） + 剩余空间按 1:2 分配 */
grid-template-columns: 200px 1fr 2fr;
  • 假设容器宽度为 1000px：
    先扣除固定的 200px，剩余 800px 按 1:2 分配 → 第一列 200px，第二列 800×(1/3)≈266px，第三列 800×(2/3)≈533px。
  1. 多个 fr 的比例计算

fr 的数值代表 “份数比例”，而非绝对数值：

  • 1fr 1fr 1fr → 比例 1:1:1 → 平均分配。
  • 2fr 1fr 1fr → 比例 2:1:1 → 总份数为 4，第一列占 2/4，其余各占 1/4。
  1. 与 auto 的区别
  • auto：根据内容自动调整宽度（内容越多，宽度越大）。
  • fr：优先分配剩余空间，与内容无关（即使内容为空，也会按比例占据空间）。

如何画一个正方形/长宽固定的长方形 ​

如何画一个正方形/长宽固定的长方形

过去的解决方案是使用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。但实际上意义有限，毕竟你把 padding 给占了，content 无任何区域。

现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio。