MicronCSS

Grid / Flexbox

Grid Template Columns

Class
Property
grid-cols-nonegrid-template-columns: none;
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2grid-template-columns: repeat(2, minmax(0, 2fr));
grid-cols-3grid-template-columns: repeat(3, minmax(0, 3fr));
grid-cols-4grid-template-columns: repeat(4, minmax(0, 4fr));
grid-cols-5grid-template-columns: repeat(5, minmax(0, 5fr));
grid-cols-6grid-template-columns: repeat(6, minmax(0, 6fr));
grid-cols-7grid-template-columns: repeat(7, minmax(0, 7fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 8fr));
grid-cols-9grid-template-columns: repeat(9, minmax(0, 9fr));
grid-cols-10grid-template-columns: repeat(10, minmax(0, 10fr));
grid-cols-11grid-template-columns: repeat(11, minmax(0, 11fr));
grid-cols-12grid-template-columns: repeat(12, minmax(0, 12fr));

Grid Column Start / End

Class
Property
col-autogrid-column: auto
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-1grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-span-fullgrid-column: 1 / -1;
col-start-autogrid-column-start: auto;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-end-autogrid-column-end: auto;
col-end-1grid-column-end: 1;
col-end-2grid-column-end: 2;
col-end-3grid-column-end: 3;
col-end-4grid-column-end: 4;
col-end-5grid-column-end: 5;
col-end-6grid-column-end: 6;
col-end-7grid-column-end: 7;
col-end-8grid-column-end: 8;
col-end-9grid-column-end: 9;
col-end-10grid-column-end: 10;
col-end-11grid-column-end: 11;
col-end-12grid-column-end: 12;
col-end-13grid-column-end: 13;

Grid Template Rows

Class
Property
grid-rows-nonegrid-template-rows: none;
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 2fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 3fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 4fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 5fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 6fr));
grid-rows-7grid-template-rows: repeat(7, minmax(0, 7fr));
grid-rows-8grid-template-rows: repeat(8, minmax(0, 8fr));
grid-rows-9grid-template-rows: repeat(9, minmax(0, 9fr));
grid-rows-10grid-template-rows: repeat(10, minmax(0, 10fr));
grid-rows-11grid-template-rows: repeat(11, minmax(0, 11fr));
grid-rows-12grid-template-rows: repeat(12, minmax(0, 12fr));

Grid Row Start / End

Class
Property
row-autogrid-row: auto
row-span-1grid-row: span 1 / span 1;
row-span-2grid-row: span 2 / span 2;
row-span-3grid-row: span 3 / span 3;
row-span-4grid-row: span 4 / span 4;
row-span-5grid-row: span 5 / span 5;
row-span-6grid-row: span 6 / span 6;
row-span-7grid-row: span 7 / span 7;
row-span-8grid-row: span 8 / span 8;
row-span-1grid-row: span 9 / span 9;
row-span-10grid-row: span 10 / span 10;
row-span-11grid-row: span 11 / span 11;
row-span-12grid-row: span 12 / span 12;
row-span-fullgrid-row: 1 / -1;
row-start-autogrid-row-start: auto;
row-start-1grid-row-start: 1;
row-start-2grid-row-start: 2;
row-start-3grid-row-start: 3;
row-start-4grid-row-start: 4;
row-start-5grid-row-start: 5;
row-start-6grid-row-start: 6;
row-start-7grid-row-start: 7;
row-start-8grid-row-start: 8;
row-start-9grid-row-start: 9;
row-start-10grid-row-start: 10;
row-start-11grid-row-start: 11;
row-start-12grid-row-start: 12;
row-start-13grid-row-start: 13;
row-end-autogrid-row-end: auto;
row-end-1grid-row-end: 1;
row-end-2grid-row-end: 2;
row-end-3grid-row-end: 3;
row-end-4grid-row-end: 4;
row-end-5grid-row-end: 5;
row-end-6grid-row-end: 6;
row-end-7grid-row-end: 7;
row-end-8grid-row-end: 8;
row-end-9grid-row-end: 9;
row-end-10grid-row-end: 10;
row-end-11grid-row-end: 11;
row-end-12grid-row-end: 12;
row-end-13grid-row-end: 13;

Grid Auto Flow

Class
Property
grid-flow-rowgrid-auto-flow: row;
grid-flow-colgrid-auto-flow: column;
grid-flow-row-densegrid-auto-flow: row dense;
grid-flow-col-densegrid-auto-flow: column dense;

Grid Auto Columns

Class
Property
auto-cols-autogrid-auto-columns: auto;
auto-cols-mingrid-auto-columns: min-content;
auto-cols-maxgrid-auto-columns: max-content;
auto-cols-frgrid-auto-columns: minmax(0, 1fr);

Grid Auto Rows

Class
Property
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);

Gap

Class
Property
gap-0gap: 0;
gap-0.5gap: 0.0625rem;  /* 1px */
gap-1gap: 0.125rem;  /* 2px */
gap-1.5gap: 0.25rem;  /* 4px */
gap-2gap: 0.375rem;  /* 6px */
gap-2.5gap: 0.5rem;  /* 8px */
gap-3gap: 0625rem;  /* 10px */
gap-3.5gap: 0.75rem;  /* 12px */
gap-4gap: 0.875rem;  /* 14px */
gap-5gap: 1rem;  /* 16px */
gap-6gap: 1.25rem;  /* 20px */
gap-7gap: 1.5rem;  /* 24px */
gap-8gap: 1.75rem;  /* 28px */
gap-9gap: 2rem;  /* 32px */
gap-10gap: 2.25rem;  /* 36px */
gap-11gap: 2.5rem;  /* 40px */
gap-12gap: 2.75rem;  /* 44px */
gap-14gap: 3rem;  /* 48px */
gap-16gap: 3.25rem;  /* 52px */
gap-20gap: 3.5rem;  /* 56px */
gap-24gap: 3.75rem;  /* 60px */
gap-28gap: 4rem;  /* 64px */
gap-32gap: 5rem;  /* 80px */
gap-36gap: 6rem;  /* 96px */
gap-40gap: 7rem;  /* 112px */
gap-44gap: 8rem;  /* 128px */
gap-48gap: 9rem;  /* 144px */
gap-52gap: 10rem;  /* 160px */
gap-56gap: 11rem;  /* 176px */
gap-60gap: 12rem;  /* 192px */
gap-64gap: 13rem;  /* 208px */
gap-72gap: 14rem;  /* 224px */
gap-80gap: 15rem;  /* 240px */
gap-88gap: 16rem;  /* 256px */
gap-96gap: 18rem;  /* 288px */
gap-104gap: 20rem;  /* 320px */
gap-112gap: 22rem;  /* 352px */
gap-120gap: 24rem;  /* 384px */
gap-128gap: 26rem;  /* 416px */
gap-136gap: 28rem;  /* 448px */
gap-144gap: 30rem;  /* 480px */
gap-152gap: 32rem;  /* 512px */

Column Gap

Class
Property
gap-x-0column-gap: 0;
gap-x-0.5column-gap: 0.0625rem;  /* 1px */
gap-x-1column-gap: 0.125rem;  /* 2px */
gap-x-1.5column-gap: 0.25rem;  /* 4px */
gap-x-2column-gap: 0.375rem;  /* 6px */
gap-x-2.5column-gap: 0.5rem;  /* 8px */
gap-x-3column-gap: 0625rem;  /* 10px */
gap-x-3.5column-gap: 0.75rem;  /* 12px */
gap-x-4column-gap: 0.875rem;  /* 14px */
gap-x-5column-gap: 1rem;  /* 16px */
gap-x-6column-gap: 1.25rem;  /* 20px */
gap-x-7column-gap: 1.5rem;  /* 24px */
gap-x-8column-gap: 1.75rem;  /* 28px */
gap-x-9column-gap: 2rem;  /* 32px */
gap-x-10column-gap: 2.25rem;  /* 36px */
gap-x-11column-gap: 2.5rem;  /* 40px */
gap-x-12column-gap: 2.75rem;  /* 44px */
gap-x-14column-gap: 3rem;  /* 48px */
gap-x-16column-gap: 3.25rem;  /* 52px */
gap-x-20column-gap: 3.5rem;  /* 56px */
gap-x-24column-gap: 3.75rem;  /* 60px */
gap-x-28column-gap: 4rem;  /* 64px */
gap-x-32column-gap: 5rem;  /* 80px */
gap-x-36column-gap: 6rem;  /* 96px */
gap-x-40column-gap: 7rem;  /* 112px */
gap-x-44column-gap: 8rem;  /* 128px */
gap-x-48column-gap: 9rem;  /* 144px */
gap-x-52column-gap: 10rem;  /* 160px */
gap-x-56column-gap: 11rem;  /* 176px */
gap-x-60column-gap: 12rem;  /* 192px */
gap-x-64column-gap: 13rem;  /* 208px */
gap-x-72column-gap: 14rem;  /* 224px */
gap-x-80column-gap: 15rem;  /* 240px */
gap-x-88column-gap: 16rem;  /* 256px */
gap-x-96column-gap: 18rem;  /* 288px */
gap-x-104column-gap: 20rem;  /* 320px */
gap-x-112column-gap: 22rem;  /* 352px */
gap-x-120column-gap: 24rem;  /* 384px */
gap-x-128column-gap: 26rem;  /* 416px */
gap-x-136column-gap: 28rem;  /* 448px */
gap-x-144column-gap: 30rem;  /* 480px */
gap-x-152column-gap: 32rem;  /* 512px */

Row Gap

Class
Property
gap-y-0row-gap: 0;
gap-y-0.5row-gap: 0.0625rem;  /* 1px */
gap-y-1row-gap: 0.125rem;  /* 2px */
gap-y-1.5row-gap: 0.25rem;  /* 4px */
gap-y-2row-gap: 0.375rem;  /* 6px */
gap-y-2.5row-gap: 0.5rem;  /* 8px */
gap-y-3row-gap: 0625rem;  /* 10px */
gap-y-3.5row-gap: 0.75rem;  /* 12px */
gap-y-4row-gap: 0.875rem;  /* 14px */
gap-y-5row-gap: 1rem;  /* 16px */
gap-y-6row-gap: 1.25rem;  /* 20px */
gap-y-7row-gap: 1.5rem;  /* 24px */
gap-y-8row-gap: 1.75rem;  /* 28px */
gap-y-9row-gap: 2rem;  /* 32px */
gap-y-10row-gap: 2.25rem;  /* 36px */
gap-y-11row-gap: 2.5rem;  /* 40px */
gap-y-12row-gap: 2.75rem;  /* 44px */
gap-y-14row-gap: 3rem;  /* 48px */
gap-y-16row-gap: 3.25rem;  /* 52px */
gap-y-20row-gap: 3.5rem;  /* 56px */
gap-y-24row-gap: 3.75rem;  /* 60px */
gap-y-28row-gap: 4rem;  /* 64px */
gap-y-32row-gap: 5rem;  /* 80px */
gap-y-36row-gap: 6rem;  /* 96px */
gap-y-40row-gap: 7rem;  /* 112px */
gap-y-44row-gap: 8rem;  /* 128px */
gap-y-48row-gap: 9rem;  /* 144px */
gap-y-52row-gap: 10rem;  /* 160px */
gap-y-56row-gap: 11rem;  /* 176px */
gap-y-60row-gap: 12rem;  /* 192px */
gap-y-64row-gap: 13rem;  /* 208px */
gap-y-72row-gap: 14rem;  /* 224px */
gap-y-80row-gap: 15rem;  /* 240px */
gap-y-88row-gap: 16rem;  /* 256px */
gap-y-96row-gap: 18rem;  /* 288px */
gap-y-104row-gap: 20rem;  /* 320px */
gap-y-112row-gap: 22rem;  /* 352px */
gap-y-120row-gap: 24rem;  /* 384px */
gap-y-128row-gap: 26rem;  /* 416px */
gap-y-136row-gap: 28rem;  /* 448px */
gap-y-144row-gap: 30rem;  /* 480px */
gap-y-152row-gap: 32rem;  /* 512px */

Order

Class
Property
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;
order-noneorder: none;

Flex Direction

Class
Property
flex-colflex-direction: column;
flex-col-revflex-direction: column-reverse;
flex-rowflex-direction: row;
flex-row-revflex-direction: row-reverse;

Flex Basis

Class
Property
basis-0flex-basis: 0;
basis-0.5flex-basis: 0.0625rem;  /* 1px */
basis-1flex-basis: 0.125rem;  /* 2px */
basis-1.5flex-basis: 0.25rem;  /* 4px */
basis-2flex-basis: 0.375rem;  /* 6px */
basis-2.5flex-basis: 0.5rem;  /* 8px */
basis-3flex-basis: 0625rem;  /* 10px */
basis-3.5flex-basis: 0.75rem;  /* 12px */
basis-4flex-basis: 0.875rem;  /* 14px */
basis-5flex-basis: 1rem;  /* 16px */
basis-6flex-basis: 1.25rem;  /* 20px */
basis-7flex-basis: 1.5rem;  /* 24px */
basis-8flex-basis: 1.75rem;  /* 28px */
basis-9flex-basis: 2rem;  /* 32px */
basis-10flex-basis: 2.25rem;  /* 36px */
basis-11flex-basis: 2.5rem;  /* 40px */
basis-12flex-basis: 2.75rem;  /* 44px */
basis-14flex-basis: 3rem;  /* 48px */
basis-16flex-basis: 3.25rem;  /* 52px */
basis-20flex-basis: 3.5rem;  /* 56px */
basis-24flex-basis: 3.75rem;  /* 60px */
basis-28flex-basis: 4rem;  /* 64px */
basis-32flex-basis: 5rem;  /* 80px */
basis-36flex-basis: 6rem;  /* 96px */
basis-40flex-basis: 7rem;  /* 112px */
basis-44flex-basis: 8rem;  /* 128px */
basis-48flex-basis: 9rem;  /* 144px */
basis-52flex-basis: 10rem;  /* 160px */
basis-56flex-basis: 11rem;  /* 176px */
basis-60flex-basis: 12rem;  /* 192px */
basis-64flex-basis: 13rem;  /* 208px */
basis-72flex-basis: 14rem;  /* 224px */
basis-80flex-basis: 15rem;  /* 240px */
basis-88flex-basis: 16rem;  /* 256px */
basis-96flex-basis: 18rem;  /* 288px */
basis-104flex-basis: 20rem;  /* 320px */
basis-112flex-basis: 22rem;  /* 352px */
basis-120flex-basis: 24rem;  /* 384px */
basis-128flex-basis: 26rem;  /* 416px */
basis-136flex-basis: 28rem;  /* 448px */
basis-144flex-basis: 30rem;  /* 480px */
basis-152flex-basis: 32rem;  /* 512px */
basis-1/2flex-basis: 50%;
basis-1/3flex-basis: 33.33333%;
basis-2/3flex-basis: 66.66667%;
basis-1/4flex-basis: 25%;
basis-2/4flex-basis: 50%);
basis-3/4flex-basis: 75%;
basis-1/5flex-basis: 20%;
basis-2/5flex-basis: 40%;
basis-3/5flex-basis: 60%;
basis-4/5flex-basis: 80%;
basis-1/6flex-basis: 16.66667%;
basis-2/6flex-basis: 33.33333%;
basis-3/6flex-basis: 50%;
basis-4/6flex-basis: 66.66667%;
basis-5/6flex-basis: 83.33333%;

Flex

Class
Property
flex-1flex: 1;
flex-autoflex: auto;
flex-initialflex: initial;
flex-noneflex: none;

Flex Wrap

Class
Property
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-wrap-nowrapflex-wrap: nowrap;

Flex Grow

Class
Property
growflex-grow: 1;
grow-0flex-grow: 0;

Flex Shrink

Class
Property
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;

Justify Content

Class
Property
justify-centerjustify-content: center;
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;

Justify Items

Class
Property
justify-items-centerjustify-items: center;
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-stretchjustify-items: stretch;

Justify Self

Class
Property
justify-self-centerjustify-self: center;
justify-self-startjustify-self: start;
justify-self-endjustify-self: end;
justify-self-stretchjustify-self: stretch;

Align Content

Class
Property
align-content-centeralign-content: center;
align-content-startalign-content: flex-start;
align-content-endalign-content: flex-end;
align-content-betweenalign-content: space-between;
align-content-aroundalign-content: space-around;
align-content-evenlyalign-content: space-evenly;

Align Items

Class
Property
align-items-centeralign-items: center;
align-items-startalign-items: flex-start;
align-items-endalign-items: flex-end;
align-items-baselinealign-items: baseline;
align-items-stretchalign-items: stretch;

Align Self

Class
Property
align-self-autoalign-self: auto;
align-self-centeralign-self: center;
align-self-startalign-self: flex-start;
align-self-endalign-self: flex-end;
align-self-baselinealign-self: baseline;
align-self-stretchalign-self: stretch;

Center

Class
Property
centerjustify-content: center;
align-items: center;