使用 CSS 创建响应式网格（100% x 100%）[重复]答案

【问题标题】：Create responsive grid with CSS (100% x 100%) [duplicate]使用 CSS 创建响应式网格（100% x 100%）[重复]
【发布时间】：2017-06-14 10:04:01
【问题描述】：

我想为我的项目创建一个网格，我有一个要填充的 div（高度和宽度）。这个网格应该响应并适应智能手机、平板电脑和小屏幕。

这是我想做的一个例子：

我尝试创建第一行，但我不明白如何管理该行的高度：

<html>
<head>
<style> 

#proj1 {
    background-image: url("immobiliare.jpg");
    width:25%;
    float:left; 
    min-height: 150px;
}

#proj2 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left;
    min-height: 150px;
}

#proj3 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;
}

#proj4 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;  
}


</style>
</head>
<body>
<div class="contenitor-projects">
    <div class="row1-projects">
        <div id="proj1">Progetto 1</div>
        <div id="proj2">Progetto 2</div>
        <div id="proj3">Progetto 3</div>
        <div id="proj4">Progetto 4</div>
    </div>
</div>  
</body>
</html>

【问题讨论】：

标签： html css layout

【解决方案1】：

使用flex 得到相同的结果

只需添加一些 css 我发布了一个 sn-p

.row1-projects {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

#proj1 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj2 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj3 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj4 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>

根据需要填充视口的第二个选项。

  body, html {
margin:0px;
padding: 0;
}
.contenitor-projects {

  height:100vh;
}
.row1-projects {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

#proj1 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj2 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj3 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj4 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */ 
height:calc(100vh / 3); 
margin:3px; /* add this */
}

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>

【讨论】：

如果我想删除“min-height: 150px;”是否可以？因为我还想填充 div 的高度，而不仅仅是重量。是否可以使高度也灵活？
您在 css 中使用图像，因此如果您需要填充 div 使用 height:100%; 或 height:100vh;，您可以为可见图像指定高度
我想用背景图片填充 div，我试着把 height: 100%;但是 div 获取内容的高度，所以它很薄。我用我的网页截图更新了我的答案，我想水平和垂直填充空间。
查看我的更新答案
谢谢是完美的！