Centering squares in CSS Grid

Question

I am trying to create four evenly spaced squares displayed in a square pattern (two on top, two on bottom), and centered on the page, much like this:

I have tried to do this in a css grid but when the grid fr get too big the divs stay on the right side of the fr and space the two columns farther apart, regardless of the browser width, like this:

I'd like to shift the Idaho and Nevada divs to the right side of the fr so all four divs are the same distance apart.

Here is my code so far: Thank you!

.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

Instead of this:

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

Use this:

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>

---

When you set the four columns to 1fr, you are distributing container space equally among all columns. As you widen the screen, the columns will expand in equal proportion, creating wider columns than the size of the squares.

When you set the inner columns to auto, they are sized to the content width. Then you can use 1fr on the outer columns to consume all free space from opposite directions, pinning the inner columns to the center at all times.

---

justify-self: end

You can also keep the original grid-template-columns and add justify-self: end to the left-side squares to get them to shift right inside the column.

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

For more about justify-self see:

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

Answer 2

use flexbox for this kind of thing. Makes it a lot easier.

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