Question

grid-template-columns：重复（自动填充，minmax（200px，1fr））;

此行实现了我想要的关于响应性方面的功能，但是无论屏幕大小如何，我都将告诉网格将页面拆分为最大4fr。

因为现在它会创建尽可能多的fr（在img大小允许的情况下），所以我希望每行最多4 fr。

（这只是示例代码，在我实际使用的所有img中，如果有区别的话，已经是400x400px）。

谢谢

==========

<!doctype html>
<title>Example</title>
<style>
  .grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  }
.grid img {
  max-width: 100%;
}
</style>
<main class="grid">
   <img src="" alt="Sample photo">
   <img src="" alt="Sample photo">
   <img src="" alt="Sample photo">
   <img src="" alt="Sample photo">
   <img src="" alt="Sample photo">
   <img src="" alt="Sample photo">
</main>

如何设置每行的最高fr

0 个答案: