有人可以帮我让这张卡片网格响应吗？

问题描述 投票：0回答：1

我最近开始在我的工作场所使用 HTML 和 CSS。

现在我遇到了第一个大问题：使我的网格卡元素响应。

我的列中有四个卡片元素，每个元素都有文本，当您将鼠标悬停在卡片上时，文本会获得不透明度。现在，如果有人在平板电脑上查看这些卡片，则一列中应该仅显示 3 张卡片（对于手机 2 张卡片），并调整文本大小。 我尝试使用正常的媒体查询，但不起作用。当我调整页面大小时，他们不会跳到下一栏。

我尝试在谷歌上搜索示例，但找不到任何有用的东西。所以我希望你们中的一些人可以帮助我。

最诚挚的问候:)

我的代码：

figure {
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 10px;
}

figure>* {
  grid-area: 1/1;
  transition: .4s;
}

figure img {
  width: 100%;
  height: auto;
}

figure:hover figcaption {
  --_i: 0%;
  background-color: #ed161f;
}

figure:hover img {
  transform: scale(1.2);
}

@supports not (-webkit-mask-clip: text) {
  figure figcaption {
    -webkit-mask: none;
    color: #fff;
  }
}

.hover-content {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: #ed161f;
}

figure:hover .hover-content {
  opacity: 1;
}

.hover-content p {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  margin: 0;
  padding-top: 20px;
}

.card-grid {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: column;
  place-content: center;
  background: #425a52;
}

@media only screen and (max-width: 1000px) {
              .card-grid {
                    display: grid;
                    grid-template-columns: auto auto auto;
              }
        }

        @media only screen and (max-width: 800px) {
              .card-grid {
                    display: grid;
                    grid-template-columns: auto auto;
              }
        }
<div class="card-grid">
  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          >Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>
</div>

html css responsive-design grid
1个回答
0
投票

首先，将媒体查询添加到 .card-grid CSS 类中，以根据屏幕宽度调整列数。您还可以根据不同的屏幕尺寸调整每张卡片内的文本大小。

figure {
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 10px;
}

figure>* {
  grid-area: 1/1;
  transition: .4s;
}

figure img {
  width: 100%;
  height: auto;
}

figure:hover figcaption {
  --_i: 0%;
  background-color: #ed161f;
}

figure:hover img {
  transform: scale(1.2);
}

@supports not (-webkit-mask-clip: text) {
  figure figcaption {
    -webkit-mask: none;
    color: #fff;
  }
}

.hover-content {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: #ed161f;
}

figure:hover .hover-content {
  opacity: 1;
}

.hover-content p {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  margin: 0;
  padding-top: 20px;
}

.card-grid {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: column;
  place-content: center;
  background: #425a52;
}
<div class="card-grid">
  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          >Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.