CSS

CSS Grid Parent Level Properties

Grid Property	Values	Description	Example Usage
display	grid	Specifies the type of layout container. For CSS Grid, it should be set to ‘grid’.	display: grid;
grid-template-columns	length, %, auto, min-content, max-content, fit-content(), repeat(), minmax()	Defines the columns of the grid, their size, and distribution. length: Fixed size in pixels or other units. %: Percentage of the container’s width. auto: Automatic sizing based on the content. min-content: Minimum size needed to fit content. max-content: Maximum size based on content. fit-content(): Size based on content but constrained by a maximum value. repeat(): Repeats a pattern of column sizes. minmax(): Size range with minimum and maximum values.	grid-template-columns: 1fr 2fr 1fr;
grid-template-rows	length, %, auto, min-content, max-content, fit-content(), repeat(), minmax()	Defines the rows of the grid, their size, and distribution. length: Fixed size in pixels or other units. %: Percentage of the container’s height. auto: Automatic sizing based on the content. min-content: Minimum size needed to fit content. max-content: Maximum size based on content. fit-content(): Size based on content but constrained by a maximum value. repeat(): Repeats a pattern of row sizes. minmax(): Size range with minimum and maximum values.	grid-template-rows: 100px auto;
grid-template-areas	none, <name>, <string>	Specifies named grid areas and their placement within the grid. Use ‘none’ to disable this feature. Use grid area names or strings to define areas.	grid-template-areas: …;
grid-template	none \| <‘grid-template-rows’> / <‘grid-template-columns’>	Shorthand for defining rows, columns, and areas in one property. Use values for ‘grid-template-rows’ and ‘grid-template-columns’ separated by a ‘/’.	grid-template: …;
grid-column-gap	length, %	Sets the gap (spacing) between columns.	grid-column-gap: 10px;
grid-row-gap	length, %	Sets the gap (spacing) between rows.	grid-row-gap: 20px;
gap/grid-gap (same)	<‘grid-row-gap’> <‘grid-column-gap’>	Shorthand for defining both row and column gap. Use values for row and column gaps separated by a space.	gap: 10px 20px;
grid-auto-columns	length, %, auto, min-content, max-content, fit-content(), minmax()	Sets the size of implicitly created columns. Use specific values or functions like ‘minmax()’, ‘fit-content()’, ‘max-content’ to control column sizing. length: Fixed size in pixels or other units. %: Percentage of the container’s width. auto: Automatic sizing based on the content. min-content: Minimum size needed to fit content. max-content: Maximum size based on content. fit-content(): Size based on content but constrained by a maximum value. minmax(): Size range with minimum and maximum values.	grid-auto-columns: minmax(100px, auto);
grid-auto-rows	length, %, auto, min-content, max-content, fit-content(), minmax()	Sets the size of implicitly created rows. Use specific values or functions like ‘minmax()’, ‘fit-content()’, ‘max-content’ to control row sizing. length: Fixed size in pixels or other units. %: Percentage of the container’s height. auto: Automatic sizing based on the content. min-content: Minimum size needed to fit content. max-content: Maximum size based on content. fit-content(): Size based on content but constrained by a maximum value. minmax(): Size range with minimum and maximum values.	grid-auto-rows: minmax(100px, auto);
grid-auto-flow	row, column, dense	Defines how auto-placed items are positioned. row: Items are placed in rows. column: Items are placed in columns. dense: Items are densely packed to fill available space.	grid-auto-flow: column dense;
grid	none \| <‘grid-template-rows’> / <‘grid-template-columns’> / [ <‘grid-auto-flow’> [ dense ]? ]	Shorthand for setting all grid-related properties. grid-template-rows: Rows definition. grid-template-columns: Columns definition. grid-auto-flow: Auto-placement and packing method. dense: Optional keyword to enable dense packing.	grid: …;
justify-content	start, end, center, stretch, space-between, space-around, space-evenly	Aligns grid items along the inline (row) axis within the grid container. start: Aligns items at the start of the container. end: Aligns items at the end of the container. center: Aligns items at the center of the container. stretch: Items stretch to fill the container. space-between: Items have space between them, with no space at the container edges. space-around: Items have space around them, including at the container edges. space-evenly: Items have equal space around them, including at the container edges.	justify-content: center;
justify-items	start, end, center, stretch	Aligns grid items along the inline (row) axis within their grid area. start: Aligns items at the start of their grid area. end: Aligns items at the end of their grid area. center: Aligns items at the center of their grid area. stretch: Items stretch to fill their grid area.	justify-items: center;
align-content	start, end, center, stretch, space-between, space-around, space-evenly	Aligns grid rows along the block (column) axis within the grid container. start: Aligns rows at the start of the container. end: Aligns rows at the end of the container. center: Aligns rows at the center of the container. stretch: Rows stretch to fill the container. space-between: Rows have space between them, with no space at the container edges. space-around: Rows have space around them, including at the container edges. space-evenly: Rows have equal space around them, including at the container edges.	align-content: center;
align-items	start, end, center, stretch	Aligns grid items along the block (column) axis within the grid container. start: Aligns items at the start of the container. end: Aligns items at the end of the container. center: Aligns items at the center of the container. stretch: Items stretch to fill the container.	align-items: center;
place-content	<align-content> / <justify-content>	Shorthand for align-content and justify-content properties in one declaration. <align-content>: Aligns rows along the block axis. <justify-content>: Aligns items along the inline axis.	place-content: center space-between;
place-items	<align-items> / <justify-items>	Shorthand for align-items and justify-items properties in one declaration. <align-items>: Aligns items along the block axis. <justify-items>: Aligns items along the inline axis.	place-items: center stretch;

CSS Grid Item Level Properties

Grid Item Property	Values	Description	Example Usage
grid-column-start	auto, <number>, <name>	Specifies the start position of the grid item’s column placement. auto: Automatic placement based on other rules. <number>: Specific column line number. <name>: Named grid area to start in.	grid-column-start: 2;
grid-column-end	auto, <number>, <name>	Specifies the end position of the grid item’s column placement. auto: Automatic placement based on other rules. <number>: Specific column line number. <name>: Named grid area to end in.	grid-column-end: span 2;
grid-row-start	auto, <number>, <name>	Specifies the start position of the grid item’s row placement. auto: Automatic placement based on other rules. <number>: Specific row line number. <name>: Named grid area to start in.	grid-row-start: 1;
grid-row-end	auto, <number>, <name>	Specifies the end position of the grid item’s row placement. auto: Automatic placement based on other rules. <number>: Specific row line number. <name>: Named grid area to end in.	grid-row-end: span 2;
grid-column	<start-line> / <end-line>	Shorthand for specifying both grid-column-start and grid-column-end values in one declaration.	grid-column: 2 / span 2;
grid-row	<start-line> / <end-line>	Shorthand for specifying both grid-row-start and grid-row-end values in one declaration.	grid-row: 1 / span 2;
grid-area	<name>, <row-start> / <column-start> / <row-end> / <column-end>	Specifies a grid item’s size and location within the grid. <name>: Named grid area. <row-start> / <column-start> / <row-end> / <column-end>: Explicit placement.	grid-area: header;
justify-self	start, end, center, stretch	Aligns the grid item along the inline (row) axis within its cell. start: Aligns at the start of the cell. end: Aligns at the end of the cell. center: Aligns at the center of the cell. stretch: Stretches to fill the cell.	justify-self: center;
align-self	start, end, center, stretch	Aligns the grid item along the block (column) axis within its cell. start: Aligns at the start of the cell. end: Aligns at the end of the cell. center: Aligns at the center of the cell. stretch: Stretches to fill the cell.	align-self: end;
place-self	<align-self> / <justify-self>	Shorthand for setting both align-self and justify-self values in one declaration.	place-self: center end;

Related