MonorailCss

Size

Utilities for controlling the width and height of an element simultaneously.

Class CSS Output
size-auto 
width: auto;
height: auto;
}
size-full 
width: 100%;
height: 100%;
}
size-screen
size-0 
width: calc(var(--spacing) * 0);
height: calc(var(--spacing) * 0);
}
size-4 
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
size-8 
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
size-1/2 
width: calc(1/2 * 100%);
height: calc(1/2 * 100%);
}
size-1/3 
width: calc(1/3 * 100%);
height: calc(1/3 * 100%);
}
size-[100px] 
width: 100px;
height: 100px;
}

size-auto

width: auto;
height: auto;

size-full

width: 100%;
height: 100%;

size-screen

size-0

                    
width: calc(var(--spacing) * 0);
height: calc(var(--spacing) * 0);
size-4

                    
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
size-8

                    
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
size-1/2

                    
width: calc(1/2 * 100%);
height: calc(1/2 * 100%);
size-1/3

                    
width: calc(1/3 * 100%);
height: calc(1/3 * 100%);
size-[100px]

                    
width: 100px;
height: 100px;

                    Reference
                

                
height
                                
                                        MDN ↗
                                    
width
                                
                                        MDN ↗
                                    
CSS Properties

                
  • height
  • width