Question

我正在尝试在我的phonegap应用程序中构建一个用户网格，该网格将每个用户显示为网格中的单元格。但是，当我使用三列网格时，只能看到一个。这是在android模拟器上。

如果我在浏览器上对其进行测试，它将显示三列，但在android仿真器上仅显示一列。

我尝试从头开始制作一个新项目，该项目仅尝试制作一个具有三列的网格。我得到的瓷砖非常宽，每排只有一个。

这是index.html和CSS文件：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: turquoise;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 100, 100, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Tangle</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
  </div>

</body>

</html>

如何使Phonegap应用在网格容器中显示多个列

0 个答案: