在CSS Grid

Question

除了使用中断（<br>）标记之外，有没有办法让我的垂直堆叠按钮之间有间隙？

我已经用尽所有其他选项，除了在每个div之后使用html表格中的break（<br>）标记，似乎没什么用。

提前感谢您的帮助！

这是我的CodePen。

这是我的代码（取出的中断标记）：

$(document).ready(function() {
  var lat;
  var long;
  $.getJSON("https://freegeoip.net/json/", function(data2) {
    lat = data2.latitude;
    long = data2.longitude;
    console.log(lat);
    console.log(long);
    //creating an api with the user's geolocation 
    var api = "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=b6e4d569d1718b07a44702443dd0ed77"


    //json call for the api
    $.getJSON(api, function(data) {
      var fTemp;
      var cTemp;
      var tempSwap = true;

      var weatherType = data.weather[0].description;
      var kTemp = data.main.temp;
      var windSpeed = data.wind.speed;
      var city = data.name;
      $("#city").html(city);
      fTemp = (kTemp * (9 / 5) - 459.67).toFixed(2);
      cTemp = (kTemp - 273).toFixed(1);

      $("#api").html(api);
      $("#weatherType").html(weatherType);

      $("#fTemp").html(fTemp + "℉");
      $("#fTemp").click(function() {
        if (tempSwap === false) {
          $("#fTemp").html(fTemp + "℉");
          tempSwap = true;
        } else {
          $("#fTemp").html(cTemp + "℃");
          tempSwap = false;
        }
      });


      $("#windSpeed").html(windSpeed + "m/sec");
    })

    if (fTemp >= 100) {
      $("container").css("background-image", "url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
    } else if (fTemp < 90) {
      $("container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
    } else if (fTemp > 80) {
      $("container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
    } else if (fTemp < 70) {
      $("container").css("background-image", "url(https://s2.postimg.org/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg)")
    } else if (fTemp < 60) {
      $("container").css("background-image", "url()")
    } else if (fTemp < 50) {
      $("container").css("background-image", "url(https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)")
    } else if (fTemp = 37.40) {
      $("container").css("background-image", url("https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg"))
    } else if (fTemp < 30) {
      $("container").css("background-image", "url(https://s2.postimg.org/nhtmgb6c9/white_snowy_road-wallpaper-1024x768.jpg)")
    } else if (fTemp < 20) {
      $("container").css("background-image", "url(https://s2.postimg.org/9a3xrntnd/rihanna_dior_sunglasses-wallpaper-1024x768.jpg)")
    } else if (fTemp < 10) {
      $("container").css("background-image", "url()")
    } else if (fTemp < 0) {
      $("container").css("background-image", "url(https://s2.postimg.org/r05mdaf49/snowy_cabin_mountains_winter-wallpaper-1024x768.jpg)")
    } else if (fTemp < -10) {
      $("container").css("background-image", "url(https://s2.postimg.org/7v2d3i5l5/skiing-wallpaper-1024x768.jpg)")

    };


  });

});

.container {
  text-align: center;
  background: url("https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center;
  /*background-color: blue;*/
  width: 100%;
  height: 1000px;
  margin: auto;
}

.About {
  /*background-color: blue;*/
  /*transform: translateY(650%)*/
  position: fixed;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
}

h2 {
  color: white;
  font-size: 1.5em
}

.holder {
  border: 3px;
  background-color: rgba(0, 0, 0, .80);
  width: 55%;
  height: auto;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  border: 3px solid grey;
  border-radius: 10px;
}

#city,
#weatherType,
#fTemp,
#windSpeed {
  transform: translateY(9%);
  background-color: #c6c6c4;
  border-bottom: 2px inset #FFF;
  border-right: 2px inset #FFF;
  border-radius: 5px;
  height: 30px;
  width: 90%;
  margin: auto;
  /*padding-bottom: 2px ;*/
}

.btn.btn-default {
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 2.45em;
}

@media(min-width: 500px) {
  .holder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title></title>

<head>
  <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="container">
    <div class="About">
      <h2>Your Local Weather App</h2>
    </div>
    <div class="holder">
      <div class="btn btn-default" id="city">
      </div>
      <div class="btn btn-default" id="weatherType">
      </div>
      <div class="btn btn-default" id="fTemp">
      </div>
      <div class="btn btn-default" id="windSpeed">
      </div>
    </div>
  </div>
</body>

Answer 1

这是您已经拥有的更广泛的屏幕：

@media (min-width: 500px) {
  .holder {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;  
  }
}

将此添加到较小的屏幕，您希望元素垂直堆叠在一列中：

.holder {
   display: grid;
   grid-template-columns: 1fr;  
   grid-row-gap: 1em;
}

revised codepen

网格提供grid-column-gap，grid-row-gap和grid-gap（简写），它在网格项之间创建空间（但不在项和容器之间）。

  

10.1. Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties

     

这些属性指定网格行和网格之间的装订线   列，分别。

Answer 2

要独立定义行间隙和列间隙：

grid-row-gap: 32px;
grid-column-gap: 16px;