Grid wrapper

Items placed on the grid should be able to align to a horizontally-centered max-width wrapper or the outer edges of the grid, or both.

This recipe uses the CSS grid minmax() function to define the grid track sizes in the grid-template-columns property. For the central columns with a maximum width, we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. Using relative or absolute <length> units (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using <percentage> values or viewport units will cause the wrapper to grow or shrink in response to its context.

The outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container.

To center the grid horizontally on the page you can set a max-width along with left and right auto margins:

.grid {
  max-width: 96vw; /* Limits the width to 96% of the width of the viewport */
  margin: 0 auto; /* horizontally centers the container */
}

Although CSS grid enables positioning items anywhere (within reason), ensuring that your underlying markup follows a logical order is important (see CSS grid layout and accessibility for more details).

• grid-template-columns property
• CSS grid layout module
• CSS grid: More flexibility with minmax() (2018)
• Breaking out with CSS grid (2017)