CSS网格中的居中正方形答案

【问题标题】：Centering squares in CSS GridCSS网格中的居中正方形
【发布时间】：2020-07-08 08:58:41
【问题描述】：

我正在尝试创建四个等间距的正方形，以正方形模式显示（两个在顶部，两个在底部），并在页面上居中，就像这样：

我曾尝试在 css 网格中执行此操作，但是当网格 fr 变得太大时，div 会停留在 fr 的右侧，并且无论浏览器宽度如何，将两列分开更远，例如这个：

我想将 Idaho 和 Nevada div 移到 fr 的右侧，以便所有四个 div 之间的距离相同。

到目前为止，这是我的代码：谢谢！

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

.idaho {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.utah {
  grid-column: 3/4;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.nevada {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.arizona {
  grid-column: 3/4;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

<div class="grid">
  <div class="idaho">
    <h2>Idaho</h2>
  </div>

  <div class="utah">
    <h2>Utah</h2>
  </div>

  <div class="nevada">
    <h2>Nevada</h2>
  </div>

  <div class="arizona">
    <h2>Arizona</h2>
  </div>

</div>

【问题讨论】：

有必要做grid吗？
不，那是我的想法。你认为有更简单的方法吗？

标签： html css css-grid centering

【解决方案1】：

`grid-template-columns`

而不是这个：

grid-template-columns: 1fr 1fr 1fr 1fr

使用这个：

grid-template-columns: 1fr auto auto 1fr

.grid {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

.idaho {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.utah {
  grid-column: 3/4;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.nevada {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.arizona {
  grid-column: 3/4;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

<div class="grid">
  <div class="idaho">
    <h2>Idaho</h2>
  </div>

  <div class="utah">
    <h2>Utah</h2>
  </div>

  <div class="nevada">
    <h2>Nevada</h2>
  </div>

  <div class="arizona">
    <h2>Arizona</h2>
  </div>

</div>

当您将四列设置为1fr 时，您将在所有列之间平均分配容器空间。当您加宽屏幕时，列将按相同比例展开，从而创建比正方形大小更宽的列。

当您将内列设置为auto 时，它们的大小将调整为内容宽度。然后您可以在外列上使用1fr 以从相反方向消耗所有可用空间，始终将内列固定在中心。

`justify-self: end`

您也可以保留原来的grid-template-columns 并将justify-self: end 添加到左侧方块中，以使它们在列内向右移动。

.grid {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

.idaho {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
  justify-self: end; /* new */
}

.utah {
  grid-column: 3/4;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.nevada {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
  justify-self: end; /* new */  
}

.arizona {
  grid-column: 3/4;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

<div class="grid">
  <div class="idaho">
    <h2>Idaho</h2>
  </div>

  <div class="utah">
    <h2>Utah</h2>
  </div>

  <div class="nevada">
    <h2>Nevada</h2>
  </div>

  <div class="arizona">
    <h2>Arizona</h2>
  </div>

</div>

有关justify-self 的更多信息，请参阅：

The difference between justify-self, justify-items and justify-content in CSS Grid

【讨论】：

【解决方案2】：

对这种事情使用 flexbox。让它变得更容易。

.container{
display:flex;
justify-content:space-evenly;
height:100vh;

}
.left,.right{
display:flex;
flex-direction:column;
justify-content:space-evenly;
}

.box{
height:200px;
width:300px;
border:solid 1px black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example 2</title>
    <link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>    
   <div class="container">
      <div class='left'>
         <div class="box">
            <h2>Idaho</h2>
         </div>
         <div class="box">
            <h2>Nevada</h2>
         </div>
      </div>
      <div class='right'>
         <div class="box">
            <h2>Utah</h2>
         </div>
         <div class="box">
            <h2>Arizona</h2>
         </div>
      </div>    
   </div>
</body>
</html>

.grid   {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;

}

.idaho  {
    grid-column: 2/3;
    grid-row: 1/2;
    height: 300px;
    width: 300px;
    background-color: gray;
}

.utah   {
    grid-column: 3/4;
    grid-row: 1/2;
    height: 300px;
    width: 300px;
    background-color: gray;
}

.nevada {
    grid-column: 2/3;
    grid-row: 2/3;
    height: 300px;
    width: 300px;
    background-color: gray;
}

.arizona    {
    grid-column: 3/4;
    grid-row: 2/3;
    height: 300px;
    width: 300px;
    background-color: gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example 2</title>
    <link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>
    
    <div class="grid">
        <div class="idaho">
            <h2>Idaho</h2>
        </div>

        <div class="utah">
            <h2>Utah</h2>
        </div>

        <div class="nevada">
            <h2>Nevada</h2>
        </div>

        <div class="arizona">
            <h2>Arizona</h2>
        </div>
    
    </div>
</body>
</html>

【讨论】：