Flex & Grid

Flex & row & columns

CSS Class	Equals to CSS
`.c-flex` `.c-row`	`display: flex;`
`.c-inline-flex`	`display: inline-flex;`
`.c-column`	`display: flex; flex-direction: column;`
`.c-row-reverse`	`display: flex; flex-direction: row-reverse;`
`.c-column-reverse`	`display: flex; flex-direction: column-reverse;`
`.c-warp`	`flex-wrap: wrap;`
`c-justify-start`	`justify-content: flex-start;`
`c-justify-end`	`justify-content: flex-end;`
`c-justify-center`	`justify-content: center;`
`c-justify-around`	`justify-content: space-around;`
`c-justify-evenly`	`justify-content: space-evenly;`
`c-justify-between`	`justify-content: space-between;`
`c-items-start`	`align-items: flex-start;`
`c-items-center`	`align-items: center;`
`c-items-end`	`align-items: flex-end;`
`c-items-stretch`	`align-items: stretch;`
`c-items-baseline`	`align-items: baseline;`

Flex direction:

flex

row

row-reverse

column

column-reverse

Justify content:

start

center

end

between

evenly

around

Align items:

start

center

end

stretch

baseline

Cols:

Gutters:

CSS Class	Equals to CSS
`.c-grid`	`display: grid;`
`.c-grid-col-[num]`	`grid-template-columns: repeat(num, 1fr);`
`.c-grid-row-[num]`	`grid-template-rows: repeat(num, 1fr);`
`.c-grid-gap-xs`	`gap: 4px;`
`.c-grid-gap-sm`	`gap: 8px;`
`.c-grid-gap-md`	`gap: 12px;`
`.c-grid-gap-lg`	`gap: 16px;`
`.c-grid-gap-xl`	`gap: 24px;`

Grid columns:

Grid rows:

Grid gap:

Item number:

Suggest changes to this page

Last update at: 2023/08/13 13:04:55

On this page