居中 CSS 砌體布局

Question

我使用 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 像素）

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

居中 CSS 砌體布局

問題描述

1 個解決方案

解決方案1
0 2023-01-06 13:23:22

居中 CSS 砌體布局

問題描述

1 個解決方案

解決方案1 0 2023-01-06 13:23:22

解決方案1
0 2023-01-06 13:23:22