.container {
display: grid;
/* OR */
display: inline-grid;
/* Define columns */
grid-template-columns: 100px 100px 100px; /* Fixed width */
grid-template-columns: 1fr 1fr 1fr; /* Fractional units */
grid-template-columns: repeat(3, 1fr); /* Repeat syntax */
grid-template-columns: minmax(100px, 1fr); /* Responsive columns */
grid-template-columns: auto 1fr auto; /* Auto-sized columns */
/* Define rows */
grid-template-rows: 100px 100px; /* Fixed height */
grid-template-rows: repeat(3, minmax(100px, auto)); /* Responsive rows */
/* Define template areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"; /* Named grid areas */
/* Gaps */
gap: 20px; /* Both row and column gap */
row-gap: 20px; /* Row gap only */
column-gap: 20px; /* Column gap only */
/* Grid alignment */
justify-items: start | end | center | stretch; /* Horizontal alignment */
align-items: start | end | center | stretch; /* Vertical alignment */
place-items: center center; /* Shorthand for both */
/* Grid content alignment */
justify-content: start | end | center | space-between | space-around;
align-content: start | end | center | space-between | space-around;
/* Auto-flow */
grid-auto-flow: row | column | dense;
}
.item {
/* Grid Area - Multiple ways to use it */
grid-area: header; /* Named template area */
grid-area: 1 / 1 / 2 / 3; /* row-start/column-start/row-end/column-end */
grid-area: 2 / span 3; /* Start at row 2, span 3 columns */
/* Individual grid-row/column properties */
grid-column: 1 / 3; /* Start / end column */
grid-column: span 2; /* Span multiple columns */
grid-row: 1 / 3; /* Start / end row */
/* Individual alignment */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: center center; /* Shorthand for both */
}
/* Example usage of grid-area with template areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }