Question

我正尝试创建一个“网格”，如下图所示。我正在使用React，Sass和EC6。我面临的问题是：

该图显示了一个9行9列的示例，但是可以将其更改为（几乎）任何内容。例如，可能有3行10列，或5行2列。但是我需要内容始终显示在屏幕上，也就是容器具有最大的宽度和高度。 Grid-like display[1]

我希望中间的正方形始终是正方形，同时显示尽可能大的内容（没有固定的宽度和高度）。

例如，如果我有6列2行，那么我需要将正方形的宽度和高度与最大宽度的100/6相同。

但是如果我翻转数字并有2列和6行，我希望正方形的大小为最大高度的100/6。

我尝试了几种CSS方法，例如使用flexbox，但是没有成功。

示例： https://codepen.io/maffekill/pen/ZNZwXz

是否有一种无需使用JS即可解决此问题的方法？

.flex-container{
  height:100px;
  display:flex;
  flex-flow:column;
  border:1px solid black;
}

.flex-row {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
   
    line-height:30px;
}
.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 auto;
    height:auto;
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

<body>
  <div class="flex-container">
    <div class="flex-row">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      <div class="flex-item">7</div>
      <div class="flex-item">8</div>
    </div>
    <div class="flex-row">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      <div class="flex-item">7</div>
      <div class="flex-item">8</div>
    </div>
  </div>
</body>

此方法未考虑高度。

现在我知道我可以计算JS中的所有宽度和高度，然后相应地更改为CSS，但这不会是纯CSS的一半，而且还需要大量额外资源。有没有办法使用纯CSS / HTML而不使用JS？

P.S。这是我的第一个问题，如果不清楚，请随时发表评论；）

Answer 1

.container{
min-width: 100%;
max-width: 100%;
}

<div class = "container">
</div>

您可以执行类似的操作以使容器始终保持100％的宽度。

如何仅使用CSS同时考虑最大宽度和高度来创建具有正方形的网格？

1 个答案: