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

经验分享
1

自适应双栏属性区布局CSS

效果如图：

250731_自适应双栏属性区布局CSS-img-250731_231730.webp
250731_自适应双栏属性区布局CSS-img-250731_231730.webp1681×876 39.8 KB

说明：

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

页面全宽时的效果：

250731_自适应双栏属性区布局CSS-img-250731_231938.webp
250731_自适应双栏属性区布局CSS-img-250731_231938.webp3340×876 49.9 KB

（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;
    }

}
}

CSS 的应用方法参见： forum-zh.obsidian.md/t/topic/43995

2 个赞
2

拿了Fancy-a-Story主题的分栏效果也不错

image
image1281×486 81.4 KB

2 个赞
3 
body {
  --properties-columns: 2; /* 列数 */
  --art-deco-color-custom: var(--color-blue);
  --art-deco-color: var(--art-deco-color-custom);
  --art-deco-gradient: linear-gradient(
    150deg,
    var(--art-deco-color) 0%,
    color-mix(in lab, var(--art-deco-color), white 3%) 26%,
    color-mix(in lab, var(--art-deco-color), white 20%) 45%,
    color-mix(in lab, var(--art-deco-color), white 40%) 51%,
    color-mix(in lab, var(--art-deco-color), white 7%) 80%
  );
  --art-deco-fan-motif: url("data:image/svg+xml,%0A%3Csvg width='13.533353mm' height='13.665177mm' viewBox='0 0 13.533353 13.665177' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath clipPathUnits='userSpaceOnUse' id='clipPath4'%3E%3Crect style='fill:%23ffffff;stroke:none;stroke-width:0.264999;paint-order:fill markers stroke' width='13.533353' height='13.665177' x='86.292633' y='113.41824' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(-86.292633,-113.41824)'%3E%3Cg clip-path='url(%23clipPath4)' style='fill:none;stroke:%23000000;stroke-width:0.264999;paint-order:fill markers stroke'%3E%3Cpath d='m 93.059653,127.08343 a 6.766336,6.766336 0 0 1 6.766336,-6.76634' /%3E%3Cpath d='m 86.293106,120.31709 a 6.766336,6.766336 0 0 1 6.766336,6.76634' /%3E%3Cpath d='m 86.29772,120.31709 a 6.766336,6.766336 0 0 1 6.766336,-6.76633 6.766336,6.766336 0 0 1 6.766336,6.76633' /%3E%3Cpath d='m 93.059874,127.1504 c -0.01,-1.5182 0.319616,-3.03719 0.987396,-4.44032 1.087733,-2.28553 2.979917,-4.06856 5.289083,-5.02655' /%3E%3Cpath d='m 93.059133,127.15011 c -0.01822,-4.33881 1.731996,-8.53918 4.893523,-11.58816' /%3E%3Cpath d='m 93.059678,127.12677 c -0.0045,-4.49797 0.69305,-8.97012 2.068264,-13.25456' /%3E%3Cpath d='m 93.05944,127.14092 c 0.01,-1.5182 -0.319616,-3.03719 -0.987396,-4.44032 -1.087733,-2.28553 -2.979917,-4.06856 -5.289083,-5.02655' /%3E%3Cpath d='m 93.060181,127.14063 c 0.01822,-4.33881 -1.731996,-8.53918 -4.893523,-11.58816' /%3E%3Cpath d='m 93.059636,127.11729 c 0.0045,-4.49797 -0.69305,-8.97012 -2.068264,-13.25456' /%3E%3Cpath d='M 93.059651,127.08342 V 113.55076' /%3E%3Cpath d='m 86.292873,120.39394 c -0.01,-1.5182 0.319616,-3.03719 0.987396,-4.44032 1.087733,-2.28553 2.979917,-4.06856 5.289083,-5.02655' /%3E%3Cpath d='m 86.292132,120.39365 c -0.01822,-4.33881 1.731996,-8.53918 4.893523,-11.58816' /%3E%3Cpath d='m 86.292677,120.37031 c -0.0045,-4.49797 0.69305,-8.97012 2.068264,-13.25456' /%3E%3Cpath d='M 86.29265,120.32696 V 106.7943' /%3E%3Cpath d='m 99.82532,120.38446 c 0.01,-1.5182 -0.319616,-3.03719 -0.987396,-4.44032 -1.087733,-2.28553 -2.979917,-4.06856 -5.289083,-5.02655' /%3E%3Cpath d='m 99.826061,120.38417 c 0.01822,-4.33881 -1.731996,-8.53918 -4.893523,-11.58816' /%3E%3Cpath d='m 99.825516,120.36083 c 0.0045,-4.49797 -0.69305,-8.97012 -2.068264,-13.25456' /%3E%3Cpath d='M 99.825531,120.32696 V 106.7943' /%3E%3Cpath d='m 86.293329,133.91673 c -0.01,-1.5182 0.319616,-3.03719 0.987396,-4.44032 1.087733,-2.28553 2.979917,-4.06856 5.289083,-5.02655' /%3E%3Cpath d='m 86.292588,133.91644 c -0.01822,-4.33881 1.731996,-8.53918 4.893523,-11.58816' /%3E%3Cpath d='m 86.293133,133.8931 c -0.0045,-4.49797 0.69305,-8.97012 2.068264,-13.25456' /%3E%3Cpath d='M 86.293106,133.84975 V 120.31709' /%3E%3Cpath d='m 99.825778,133.90725 c 0.01,-1.5182 -0.319616,-3.03719 -0.987396,-4.44032 -1.087733,-2.28553 -2.979917,-4.06856 -5.289083,-5.02655' /%3E%3Cpath d='m 99.826519,133.90696 c 0.01822,-4.33881 -1.731996,-8.53918 -4.893523,-11.58816' /%3E%3Cpath d='m 99.825974,133.88362 c 0.0045,-4.49797 -0.69305,-8.97012 -2.068264,-13.25456' /%3E%3Cpath d='M 99.825989,133.84975 V 120.31709' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.metadata-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--art-deco-gradient);
  mask-image: var(--art-deco-fan-motif);
  mask-size: 70px;
  mask-position: bottom left;
  opacity: 0.03;
  z-index: -1;
}

.metadata-container {
  --input-height: var(--metadata-input-height);
  border-radius: var(--metadata-border-radius);
  background-color: var(--metadata-background);
  border-color: var(--metadata-border-color);
  border-style: solid;
  border-width: var(--metadata-border-width);
  padding: var(--metadata-padding);
  color: var(--text-muted);
  position: relative;
  max-width: var(--metadata-max-width);
  margin-block-end: var(--p-spacing);
}

@container metadata (width > 600px) {
  .metadata-content:not(:is(body.is-grabbing .metadata-content:hover)) {
    display: block;
    column-count: var(--properties-columns);
    column-rule: 1px dashed var(--metadata-border-color);
  }
}
[data-type="markdown"] {
  --metadata-border-width: 1px;
  --metadata-padding: var(--size-4-6) var(--size-4-2) var(--size-4-2)
    var(--size-4-2);
}
[data-type="markdown"] .metadata-container {
  outline: 1px solid
    color-mix(in srgb, var(--metadata-border-color), transparent 50%);
  outline-offset: -5px;
}
[data-type="markdown"] .metadata-properties-heading .collapse-indicator {
  inset-inline-start: 0;
}
[data-type="markdown"] .metadata-properties-heading {
  --heading-padding-inline: var(--size-4-6);
  position: absolute;
  top: 0;
  transform: translateY(calc(-50% + 0.05em));
  background: linear-gradient(
    to right,
    transparent,
    var(--workleaves-background) var(--heading-padding-inline),
    var(--workleaves-background) calc(100% - var(--heading-padding-inline)),
    transparent 100%
  );
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center calc(50% + 1px);
  padding-inline: var(--heading-padding-inline);
}

.workspace
  > .workspace-split:not(.mod-root)
  [data-type="markdown"]
  .metadata-container {
  --metadata-padding: 0.5em 0 0 0;
  outline: none;
}

.workspace
  > .workspace-split:not(.mod-root)
  [data-type="markdown"]
  .metadata-properties-heading {
  transform: translateY(-50%);
}
2 个赞
4

nice 啊，不错