CSS

About Lesson

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