<!-- justify-content: align grid columns horizontally -->
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  width: 600px;
  justify-content: center;
  /* Aligns columns as a whole, not individual cells */
}

<!-- [empty] [col1] [col2] [empty] -->

/* align-content: align grid rows vertically -->
.grid {
  display: grid;
  grid-template-rows: 100px 100px;
  height: 400px;
  align-content: center;
  /* Aligns rows as a whole */
}

<!-- [empty] -->
<!-- [row1] -->
<!-- [row2] -->
<!-- [empty] -->

/* Both together */
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
  width: 600px;
  height: 400px;
  justify-content: center;
  align-content: center;
}

<!-- Grid centered both ways -->

<!-- justify-items: align items horizontally in their cells -->
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  justify-items: center;
  /* All items centered within their cells horizontally */
}

.item {
  /* Item centered in its column -->
}

<!-- Each item centered in its cell -->

/* align-items: align items vertically in their cells -->
.grid {
  display: grid;
  grid-template-rows: 100px 100px;
  align-items: center;
  /* All items centered within their cells vertically */
}

<!-- [item centered] -->

/* stretch: default - fills cell -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  justify-items: stretch;  /* default: fills horizontally -->
  align-items: stretch;    /* default: fills vertically -->
}

<!-- Items expand to fill cells -->

/* Other values */
.grid {
  justify-items: start;   /* align left -->
  align-items: start;     /* align top -->
}

.grid {
  justify-items: end;     /* align right -->
  align-items: end;       /* align bottom -->
}

.grid {
  justify-items: center;  /* center horizontally -->
  align-items: center;    /* center vertically -->
}

<!-- Practical examples -->

/* Centered grid layout -->
.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 150px);
  gap: 10px;
  justify-content: center;
  align-content: center;
  width: 600px;
  height: 500px;
}

<!-- Grid centered in container -->
<!-- Items fill their cells by default -->

/* Items centered in cells -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  justify-items: center;  /* items centered horizontally -->
  align-items: center;    /* items centered vertically -->
  gap: 10px;
}

<!-- All items centered in their cells -->

/* Space-around distribution -->
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  width: 600px;
  justify-content: space-around;
  /* Distributes columns with space around -->
}

<!-- [space] [col1] [space] [col2] [space] -->

/* Start alignment -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  align-items: start;
  height: 300px;
}

<!-- Items top-left in cells -->

/* End alignment -->
.grid {
  display: grid;
  grid-template-rows: 150px 150px;
  align-content: end;
  height: 400px;
}

<!-- Rows aligned at bottom -->

<!-- justify-self: override horizontal alignment for one item -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;  /* all items centered by default -->
}

.item.special {
  justify-self: start;  /* this item left-aligned -->
}

<!-- [centered] [left-aligned] -->

/* align-self: override vertical alignment for one item -->
.grid {
  display: grid;
  grid-template-rows: 150px 150px;
  align-items: center;  /* all items centered by default -->
}

.item.top {
  align-self: start;  /* this item at top -->
}

.item.bottom {
  align-self: end;    /* this item at bottom -->
}

<!-- [centered] -->
<!-- [top] -->
<!-- [bottom] -->

/* Both together */
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 150px 150px;
  justify-items: center;
  align-items: center;
}

.item.feature {
  justify-self: stretch;  /* stretch horizontally -->
  align-self: stretch;    /* stretch vertically -->
  /* Feature item fills its cell completely -->
}

<!-- place-items: shorthand for justify-items + align-items -->
.grid {
  display: grid;
  place-items: center;
  /* Equivalent to: -->
  /* justify-items: center; -->
  /* align-items: center; -->
}

<!-- All items centered in cells -->

/* place-content: shorthand for justify-content + align-content -->
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 150px 150px;
  width: 600px;
  height: 400px;
  place-content: center;
  /* Equivalent to: -->
  /* justify-content: center; -->
  /* align-content: center; -->
}

<!-- Grid centered in container -->

/* place-self: shorthand for justify-self + align-self -->
.item {
  place-self: end;
  /* Equivalent to: -->
  /* justify-self: end; -->
  /* align-self: end; -->
  /* Item bottom-right in its cell -->
}

/* Practical centered layout -->
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
  place-items: center;  /* all items centered -->
  gap: 20px;
}

<!-- All items centered in cells -->

/* Mix centered grid with content flow -->
.page {
  display: grid;
  grid-template-areas: "content";
  place-items: center;  /* content centered -->
  min-height: 100vh;
}

.content {
  grid-area: content;
  max-width: 800px;  <!-- content has max width -->
}

<!-- Content centered, max-width respected -->