I rewrote my site based off the following grid system (?):

.grid-container {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
}

.grid-centered {
  grid-column: 4 / span 18;
  @media screen and (max-width: 1080px) {
    width: 100%;
    grid-column: 3 / -3;
  }
}

.grid-reading {
  grid-column: 6 / span 14;
  @media screen and (max-width: 1080px) {
    width: 100%;
    grid-column: 3 / -3;
  }
}

.grid-item {
  grid-column: 3 / -3 !important;
  @media screen and (max-width: 1080px) {
    grid-column: 1 / -1 !important;
  }
  width: 100%;
}

.grid-item-max {
  grid-column: 1 / -1;
}

The .grid-item and .grid-item-max are for grandkids of grid container’s children. We need this because subgrid is not a thing yet in 2019 December.

Then if you tell how elements would expand:

h1, h2, h3, h4, h5, h6, p, ul, ol {
  grid-column: 6 / span 14;
  @media screen and (max-width: 1080px) {
    grid-column: 3 / -3;
  }
}

With these combined, you can fine control the elements inside grid container.

This is not perfect for every viewports and edge cases, but I’m happy as is now. About 100 lines or so CSS to rebuild this site. Compared to the past, I installed a few thousand lines of framework code to achieve more or less the same result I want.

CSS Grid is belated greatness happened to web!