Web Development35 entries

CSS Grid

Grid container and item properties, template areas, auto-placement, and responsive grids

1Container Properties

`display: grid`	Enable grid layout on container
`display: inline-grid`	Inline-level grid container
`grid-template-columns: 1fr 2fr 1fr`	Define column sizes (fractional)
`grid-template-columns: repeat(3, 1fr)`	Repeat: 3 equal columns
`grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))`	Responsive auto-fill columns
`grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`	Auto-fit (stretch to fill)
`grid-template-rows: 100px auto 1fr`	Define row sizes
`grid-auto-rows: minmax(100px, auto)`	Default height for implicit rows

`grid-template-areas: "header header" "sidebar main" "footer footer"`	Define named areas
`grid-area: header`	Place item in named area
`grid-area: . (dot)`	Empty cell in template

`gap: 16px`	Equal row and column gap
`gap: 16px 24px`	Row gap, column gap
`justify-items: start \| center \| end \| stretch`	Align items along row axis
`align-items: start \| center \| end \| stretch`	Align items along column axis
`place-items: center`	Shorthand for align-items + justify-items
`justify-content: center \| space-between`	Align grid within container (row)
`align-content: center \| space-between`	Align grid within container (column)

`grid-column: 1 / 3`	Span from column line 1 to 3
`grid-column: 1 / -1`	Span full width
`grid-column: span 2`	Span 2 columns from auto position
`grid-row: 1 / 3`	Span from row line 1 to 3
`grid-row: span 2`	Span 2 rows
`grid-area: 1 / 1 / 3 / 3`	Shorthand: row-start / col-start / row-end / col-end

`justify-self: start \| center \| end \| stretch`	Align item along row axis
`align-self: start \| center \| end \| stretch`	Align item along column axis
`place-self: center`	Shorthand for align-self + justify-self
`order: -1`	Change visual order
`z-index: 1`	Stack order for overlapping items

`1fr`	One fraction of available space
`minmax(200px, 1fr)`	Min 200px, max 1fr
`min-content`	Size to minimum content width
`max-content`	Size to maximum content width
`fit-content(300px)`	Like max-content but capped at 300px
`auto`	Size based on content and available space

useState, useEffect, useRef, useMemo, React 19 hooks, and custom hook patterns

Flex container and item properties, alignment, ordering, and common layout patterns

Complete HTTP status code reference: 1xx informational through 5xx server errors