CSS 网格中的正方形居中

Question

我正在尝试创建四个以正方形图案均匀显示的 spaced 正方形（两个在顶部，两个在底部），并位于页面中央，就像这样：

我曾尝试在 css 网格中执行此操作，但是当网格 fr 变得太大时，div 会停留在 fr 和 [=37= 的右侧] 两列相距较远，不考虑浏览器宽度，像这样：

我想将爱达荷州和内华达州的 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>

Answer 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 时，您将在所有列中平均分配容器 space。当您加宽屏幕时，列将按相同比例扩展，创建比正方形更宽的列。

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

`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 的更多信息，请参阅：

Answer 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>

CSS 网格中的正方形居中

Centering squares in CSS Grid

html

css

centering

css-grid

`grid-template-columns`

`justify-self: end`