CSS - 使用网格制作响应式方形网格[重复]答案

【问题标题】：CSS - Make a responsive square grid, using grid [duplicate]CSS - 使用网格制作响应式方形网格[重复]
【发布时间】：2020-11-14 21:20:30
【问题描述】：

我想制作一个 3x3 网格（单元格是图像），在 css 中使用“网格”，如下：

网格的每个单元格都是一个正方形
网格是响应式的（我不想要像 display:flex; flex-wrap: wrap 这样的东西）我的意思是当屏幕变小时，网格的单元格仍然是正方形，并且网格占据 100% 的宽度

我不知道如何解决的其他事情是：

在网格的单元格中，放置图像（比例不是正方形），但图像保持比例，我的意思是像裁剪图像一样

我已经尝试过：我已经制作了 html sintax：


    <div class="grid">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG/750px-Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG">
            <img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/paris-2020.jpg">
            <img src="https://ice-2020.com/wp-content/uploads/2018/11/GettyImages-674739845-1200x800.jpg">
            <img src="https://eufcn.com/wp-content/uploads/2017/11/madrid_filmmadrid.jpg">
            <img src="https://www.futbolred.com/files/article_main/uploads/2020/05/29/5ed193de4ae3f.jpeg">
            <img src="https://lp-cms-production.imgix.net/2019-06/GettyImages-538096543_medium.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4">
            <img src="https://blog.global-exchange.com/wp-content/uploads/2018/08/Moscu-calles-840.jpg">
            <img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/Rio-de-Janeiro-2020.jpg">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQj3iLwvZZO-JzJAPquVMTORT4CPOFURK6fzA&usqp=CAU">
    </div>

css 是

.grid{
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto;

  height: auto;
  /*This doesn't work, the height is fit to the images*/

  grid-template-rows: auto auto auto;
  /* This doesn't work, the cells are not squares*/
}

.grid > img{
  width: 100%;
  height: 100%;
  /*In this way I lose the ratio of the image*/
 }

【问题讨论】：

请编辑您的问题以将您的 HTML 代码也包含为 minimal and reproducible example，以便我们看到您遇到的问题并能够提供帮助。

标签： html css grid

【解决方案1】：

网格布局是一个基于网格的布局系统，有行和列，更容易设计网页而不使用位置。 #grid 是不正确的类选择。 # 用于按 Id 选择元素。 .grid 是正确的。我希望这段代码能帮助你解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 400px;
            height: 250px;
        }
        .grid{
            display: grid;
            grid-template-rows: repeat(2,1fr);
            grid-template-columns: auto auto auto;
            grid-gap: 2px;
        }
    </style>
</head>
<body>

<div class="grid">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG/750px-Istanbul_Skyline_Be%C5%9Fikta%C5%9F_%C5%9Ei%C5%9Fli.JPG">
    <img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/paris-2020.jpg">
    <img src="https://ice-2020.com/wp-content/uploads/2018/11/GettyImages-674739845-1200x800.jpg">
    <img src="https://eufcn.com/wp-content/uploads/2017/11/madrid_filmmadrid.jpg">
    <img src="https://www.futbolred.com/files/article_main/uploads/2020/05/29/5ed193de4ae3f.jpeg">
    <img src="https://lp-cms-production.imgix.net/2019-06/GettyImages-538096543_medium.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4">
    <img src="https://blog.global-exchange.com/wp-content/uploads/2018/08/Moscu-calles-840.jpg">
    <img src="https://www.turismoviajar.com/wp-content/uploads/2019/10/Rio-de-Janeiro-2020.jpg">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQj3iLwvZZO-JzJAPquVMTORT4CPOFURK6fzA&usqp=CAU">
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我看到您在 CSS 中使用了两次 grid-template-rows。如果您只是将第二个更改为列，您应该得到您想要的。

  .grid {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto auto;
}

.grid img {
  width: 100%;
  height: 100%;
}

结果： Shown Here!

【讨论】：

【解决方案3】：

我知道了，我就这样解决了

.image-grid {
  display: grid;

  margin: auto;
  height: 90vw; /*This is optional*/
  width: 90vw;  /*With 100 there is a scrollbar(horizontal), 
  and I don't find a way to fit 100% without the scrollbar, but
  this works fine*/

  border: 2px solid black;

  grid-template-columns: repeat(3, 30vw);
  grid-template-rows: repeat(3, 30vw);
}

.image-grid > img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

【讨论】：