How do I center a grid item vertically based on the other grid items' size?

Question

For reference, the index.html and index.css:

#main-grid {
  display: grid;
  grid-template: [top] 1fr [middle] 2fr [bottom] / [left] 1fr [center] 2fr [right];
}

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;
}

#main-grid-top-right-item {
  grid-area: top / center / middle / right;
  background-color: lime;
  font-size: xx-large;
}

#main-grid-bottom-left-item {
  grid-area: middle / left / bottom / center;
  background-color: cyan;
}

#main-grid-bottom-right-item {
  grid-area: middle / center / bottom / right;
  background-color: yellow
}

.white-background {
  background-color: white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="index.css" />
  <title>
    HTML Document
  </title>
</head>

<body>
  <div id="main-grid">
    <div id="main-grid-top-left-item">
      <span class="white-background">
                    0
                </span>
    </div>
    <div id="main-grid-top-right-item">
      <span class="white-background">
                    1
                </span>
    </div>
    <div id="main-grid-bottom-left-item">
      <span class="white-background">
                    2
                </span>
    </div>
    <div id="main-grid-bottom-right-item">
      <span class="white-background">
                    3
                </span>
    </div>
  </div>
</body>

</html>

Now, what I want is for the top-left 0 to be vertically centered with respect to the size of the row that is in as calculated using the size of the container that contains the top-right 1. How is that possible?

`justify-self`, `justify-content`, `justify-items`, `vertical-align`, `align-self`, `align-items`, `align-content` all don't seem to work. — schuelermine, Jul 20 '20 at 13:44
I don't think if I understand your question clearly but here is a question you want to center top-left `0` without respect the order if not you can give me some brief — Umutambyi Gad, Jul 20 '20 at 14:02

score 1 · Accepted Answer · answered Jul 20 '20 at 14:03

You can center the content of a cell using good old flexbox:

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;

  // and then...
  display: flex;
  //justify-content: center; // do this if you also want horizontal alignment
  align-items: center;
}

Here it is in the context of your example:

#main-grid {
  display: grid;
  grid-template: [top] 1fr [middle] 2fr [bottom] / [left] 1fr [center] 2fr [right];
}

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;
  display: flex;
  align-items: center;
}

#main-grid-top-right-item {
  grid-area: top / center / middle / right;
  background-color: lime;
  font-size: xx-large;
}

#main-grid-bottom-left-item {
  grid-area: middle / left / bottom / center;
  background-color: cyan;
}

#main-grid-bottom-right-item {
  grid-area: middle / center / bottom / right;
  background-color: yellow
}

.white-background {
  background-color: white;
}

```

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="index.css" />
  <title>
    HTML Document
  </title>
</head>

<body>
  <div id="main-grid">
    <div id="main-grid-top-left-item">
      <span class="white-background">
                    0
                </span>
    </div>
    <div id="main-grid-top-right-item">
      <span class="white-background">
                    1
                </span>
    </div>
    <div id="main-grid-bottom-left-item">
      <span class="white-background">
                    2
                </span>
    </div>
    <div id="main-grid-bottom-right-item">
      <span class="white-background">
                    3
                </span>
    </div>
  </div>
</body>

</html>

How do I center a grid item vertically based on the other grid items' size?

1 Answers1