çå¸æµå¸å±

æéå¯ç¨

CSS ç½æ ¼å¸å±çç¬¬ 3 çè§èåå«äº masonry å¼ï¼ç¨äº grid-template-columns å grid-template-rowsãæ¬æåè¯¦ç»ä»ç»äºçå¸æµå¸å±æ¯ä»ä¹ï¼ä»¥åå¦ä½ä½¿ç¨å®ã

åå»ºçå¸æµå¸å±

* {
  box-sizing: border-box;
}

body {
  font: 1.2em sans-serif;
}

.grid {
  padding: 10px;
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.item {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}

css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "3.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.blockSize = itemSizes[i];
}

ä¹å¯ä»¥åå»ºæè¡å è½½åç´ ççå¸æµå¸å±ã

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "2.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.inlineSize = itemSizes[i];
}

css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 100px);
}

æ§å¶ç½æ ¼è½´

è·¨è½¨éççå¸æµå¸å±

html

<div class="grid">
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

.span-2 {
  grid-column-end: span 2;
}

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item positioned">å·²å®ä½ã</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

.positioned {
  padding: 1em;
  grid-column: 2 / 4;
}

çå¸æµå¸å±çåé

è§è

è§è
CSS Grid Layout Module Level 3 # masonry-layout

grid-auto-flow ç¨äºæ§å¶ç½æ ¼èªå¨æåçå±æ§
åç CSS çå¸æµå¸å±ï¼åºäº CSS ç½æ ¼å¸å±ï¼æ¥èª Smashing Magazineï¼2020ï¼

å¸®å©æ¹è¿ MDN

äºè§£å¦ä½åä¸è´¡ç®

æ¤é¡µé¢æåæ´æ°äº 2025å¹´12æ2æ¥ï¼ç± MDN è´¡ç®èæ´æ°ã

å¨ GitHub ä¸æ¥çæ¤é¡µé¢ â¢ æ¥åæ¤åå®¹çé®é¢

çå¸æµå¸å±

åå»ºçå¸æµå¸å±

æ§å¶ç½æ ¼è½´

è·¨è½¨éççå¸æµå¸å±

çå¸æµå¸å±çåé

è§è

æµè§å¨å¼å®¹æ§

css.properties.grid-template-columns.masonry

css.properties.grid-template-rows.masonry

åè§

å¸®å©æ¹è¿ MDN

çå¸æµå¸å±

å¸®å©æ¹è¿ MDN

çå¸æµå¸å±

å¸®å©æ¹è¿ MDN