【Obsidian样式】自适应双栏属性区布局CSS

自适应双栏属性区布局CSS

效果如图：

说明：

1. 使用 grid 网格布局，将属性区改为双栏显示
2. 宽度带有一定自适应，会取 原尺寸的150% 和 窗口宽度的80% 中的最小值，避免越界
3. 添加属性的按钮在下方居中位置，默认半透明，鼠标移上去后显示
4. 如果你使用 .wide 之类的全宽样式，那么属性区会自适应地变成3栏或4栏（使用 @container 特性实现）

页面全宽时的效果：

（1200px 以上三栏，1600px 以上四栏）

CSS： 【Moy】 Multi-Column Property.css

或自行保存：

/* ! Moy-属性区调整.css */
/* created: 2025-07-31 */
/* v1.0 */

/* ! 加宽 &双栏 */

/* scope 确保只影响中间区域 */
@scope (.workspace-split.mod-root .cm-sizer) {

/* 增加宽度 */
.metadata-container {
    width: min(150%, 80vw);
    margin-left: max(-25%, calc(50% - 40vw));
    /* width: min(150%, 2400px);
    margin-left: max(-25%, calc(50% - 1200px)); */

    container-name: metadata-container;
    container-type: inline-size;

}

/* 网格，分双栏 */
.metadata-properties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    --metadata-property-gap: 6px;
    /* 空出小间距 */
    gap: var(--metadata-property-gap);
    padding: var(--metadata-property-gap);
}

@container metadata-container (min-width: 1200px) {
    .metadata-properties {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container metadata-container (min-width: 1600px) {
    .metadata-properties {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 限制链接长度 */
.metadata-link {
    max-width: 100%;
}

/* 属性名称靠右 */
/* input.metadata-property-key-input {
    text-align: right;
    padding-right: 8px;
} */

.metadata-add-button.text-icon-button {
    /* justify-content: right;
    width: 100%; */
    opacity: 0.25;
    /* 图标元素本身 18px 宽*/
    margin-left: calc(50% - 25px);
    padding-left: 16px;
    padding-right: 16px;

    /* position: absolute;
    right: 0px; */

    transition: opacity 0.2s ease-in-out;

    &:hover {
        opacity: 1;
    }

    .text-button-label {
        display: none;
    }

}
}

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。