居中 CSS 砌体布局答案

【问题标题】：Centering CSS Masonry Layout居中 CSS 砌体布局
【发布时间】：2023-01-06 21:23:22
【问题描述】：

我使用 css 网格制作了一个简单的砌体布局。

我的要求是我最多需要 8 列并使其响应屏幕尺寸。

一切都很好，直到我在“砌体”中有 >=8 块砖。随着砖块的数量变得<8，我希望'n'列在'砌体'中居中。

HTML

<body>
    <div class="masonry">
        <div class="brick">
            <p class="subheading-text">Automobiles</p>
            <img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/235/1672659803.jpeg">
        </div>
        <div class="brick">
            <img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/233/download (2).jpeg">
        </div>
        <div class="brick">
            <p class="subheading-text">Badhai</p>
            <img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/223/advertisement(2).jpeg">
        </div>
        <div class="brick">
            <p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p> 
        </div>
        <div class="brick">
            <p class="subheading-text">Business</p>
            <p class="content-text"><strong>WANTED</strong> Investor/Partner Rs.3.5 Cr for our Packaging Material mfg Unit Nr. Mumbai 7021629703 9821009496</p> 
        </div>
        <div class="brick">
            <p class="subheading-text">Education</p>
            <p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p> 
        </div>
    </div>
</body>

CSS

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.masonry {
  --masonry-gap: 15px;
  --masonry-brick-width: 200px;
  column-gap: var(--masonry-gap);
  column-fill: initial;
  column-width: var(--masonry-brick-width);
  max-width: 1740px;
}

.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--masonry-gap);
}

@supports (grid-template-rows: masonry) {
  .masonry {
    display: grid;
    gap: var(--masonry-gap);
    grid-template-rows: masonry;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--masonry-brick-width), 1fr)
    );
    align-tracks: stretch;
  }

  .masonry > * {
    margin-bottom: initial;
  }
}

/* some styling not important */
.masonry {
  padding: 8px;
}

.content-text {
  padding: 10px;
  margin: 0px;
  border: 1px solid black;
  border-radius: 5px;
  transition: 0.15s ease-in-out;
}

.content-text:hover {
  background-color: antiquewhite;
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
}

.heading-text {
  margin: 0px;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  background-color: #ca4040;
  color: white;
  border-radius: 5px;
}

.subheading-text {
  margin: 0px;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  color: #404eca;
  border: 3px solid #404eca;
  border-radius: 5px;
}

.content-img {
  width: 100%;
  transition: 0.15s ease-in-out;
}

.content-img:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
}

任何帮助表示赞赏。

我试图将内容放在“砌体”div 的中心，但如果砖块数量 <8，它们总是保持对齐（最大 8，因为我已将“砌体”div 的最大宽度固定为 1740 像素）

【问题讨论】：

标签： javascript html css grid masonry

【解决方案1】：

.masonry {
  --masonry-gap: 15px;
  --masonry-brick-width: 200px;
  column-gap: var(--masonry-gap);
  column-fill: initial;
  column-width: var(--masonry-brick-width);
  max-width: 1740px;
  display: grid;
  gap: var(--masonry-gap);
  grid-template-rows: masonry;
  grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
  align-items: center; /* added to center the columns */
  align-tracks: stretch;
}

【讨论】：