/* Self justification (horizontal or column alignment) */
justify-self: start; /* Align item to the left */
justify-self: center; /* Align item centered within its column */
justify-self: end; /* Align item to the right */
justify-self: stretch; /* (default) Fills available area (horizontally) *//* Placement shorthand */
place-self: start stretch;
/* The above is the same as below long-hand */
align-self: start;
justify-self: stretch;/* Column position */
grid-column-start: 1;
grid-column-end: 2;
grid-column: 1 / 2; /* Short hand */
grid-column: 1 / span 2; /* Span 2 columns without explicitly defining an endpoint */
grid-column: 1; /* Start in and occupy a single column *//* Place item shorthand */
place-items: start stretch;
/* The above is the same as below long-hand */
align-items: start;
justify-items: stretch;/* Area positioning */
grid-area: header; /* You can use a named grid area from the container */
grid-area: 2 / 1 / 4 / 2; /* Or you can use positioning. This is equivalent to... */
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 2;/* Self alignment (vertical or row alignment) */
align-self: start; /* Align item to the top */
align-self: center; /* Align item centered within its row */
align-self: end; /* Align item to the bottom */
align-self: stretch; /* (default) Fills available area (vertically) *//* Columns and rows */
grid-template-columns: 1rem 2rem 1rem; /* Measurement units */
grid-template-columns: 25% 50% 25%; /* Percentage units */
grid-template-columns: 1rem auto 1rem 2fr; /* Fill remaining widths with auto or fr units */
grid-template-columns: repeat(12, 1fr); /* Repeat columns without needing to write them */
grid-template-rows: 1rem 10% auto repeat(5, 10px); /* Mix any group, same rules work for rows *//* Item alignment (vertical or row alignment) */
align-items: start; /* Align items to the top */
align-items: center; /* Align items centered within its row */
align-items: end; /* Align items to the bottom */
align-items: stretch; /* (default) Fills available area (vertically) *//* Automatic columns and rows */
grid-auto-columns: 10px; /* No matter how many columns of content end up in the grid, each column will be this same width */
grid-auto-rows: 1rem; /* No matter how many rows of content end up in the grid, each row will be this same height *//* Content alignment (horizontal or column alignment) */
align-content: start; /* Align content to the top */
align-content: center; /* Align content centered vertically within the grid */
align-content: end; /* Align content to the bottom */
align-content: stretch; /* (default) Fills available area (vertically) */
align-content: space-around; /* Chooses a space for the top and bottom of the rows like a top and bottom margin */
align-content: space-between; /* Chooses a space to go between rows, no margins on outside of content */
align-content: space-evenly; /* Chooses a space that goes between all rows and edges consistently */