Web
CSS Flexbox & Grid
The two layout systems, side by side.
Flex container
.container {
display: flex;
flex-direction: row; /* | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 1rem;
flex-wrap: wrap;
}justify-content
flex-startPack to startcenterCenter itemsspace-betweenEnds flush, gaps evenspace-aroundEqual space aroundspace-evenlyEqual space betweenFlex item
flex: 1Grow to fillflex-grow: 2Grow ratioflex-shrink: 0Don't shrinkflex-basis: 200pxBase sizealign-self: endOverride alignorder: -1Reorder visuallyGrid container
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
}
/* responsive auto-fit */
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));Grid placement
grid-column: 1 / 3Span columns 1–2grid-row: 1 / -1Span all rowsgrid-column: span 2Span 2 columnsplace-items: centerCenter both axesCentering (the classic)
/* fl: any element */
.parent {
display: grid;
place-items: center;
min-height: 100vh;
}