溢出時如何將整個單元格隱藏在 css 的網格中

Question

我正在嘗試制作一個占據整個視口的網格。 它有長寬比為 1 的正方形單元格。正方形的寬度隨着屏幕的寬度按比例增加，從而改變正方形的高度。 當它們的一部分超出屏幕時，我想完全隱藏底部溢出的單元格。 目前 overflow 屬性只隱藏單元格中超出視口的部分

問題的圖像

<body>
  <div id="projects">
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
  </div>
</body>
</html>

:root {
  --light-color: #e8e6e3;
  --grid-div-min-width: 200px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #282c2d;
  min-height: 100vh;
}

#projects {
  color: white;
  text-align: center;

  display: grid;
  width: 100vw;
  max-height: 100vh;
  gap: .2rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-div-min-width), 1fr));
  overflow: hidden;
}

#projects>div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  /*overflow: hidden;*/
}

#projects>div>img {
  position: absolute;
  z-index: -1;
  width: 100%;
  transition: 0.4s;
}

我嘗試添加“隱藏到子元素的溢出”，但它似乎擺脫了縱橫比

說明前面句子結果的圖像

我嘗試像對列所做的那樣手動設置行數，但單元格的內容不適合行

說明前面句子結果的圖像

Answer 1

實現具有占據整個視口的方形單元格的網格的一種方法是使用display: grid並將grid-template-rows和grid-template-columns屬性設置為1fr ，這意味着每一行和每一列將占據一個等量的空間。 您還可以設置grid-gap屬性以在單元格之間添加一些空間。

.grid {
  display: grid;
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-gap: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cell {
  /* Add styles for the cells here */
}

下一個，

<div class="grid">
  <div class="cell"><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
  <div class="cell"><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
  <div class="cell"><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
  <!-- Add more cells here -->
</div>

這將創建一個網格，其中包含方形單元格並占據整個視口，任何溢出的單元格都將被隱藏。

溢出時如何將整個單元格隱藏在 css 的網格中

問題描述

1 個解決方案

解決方案1
0 2023-01-09 12:12:04

溢出時如何將整個單元格隱藏在 css 的網格中

問題描述

1 個解決方案

解決方案1 0 2023-01-09 12:12:04

解決方案1
0 2023-01-09 12:12:04