Box & Layout

CSS Box & Layout Cheat Sheet

Box Model

Box Model Properties

/* Content box (default) */
.box {
    box-sizing: content-box;
    width: 300px;        /* Content width only */
    height: 200px;       /* Content height only */
    padding: 20px;       /* Adds to width/height */
    border: 2px solid;   /* Adds to width/height */
    margin: 10px;        /* Outside spacing */
}

/* Border box (recommended) */
.box {
    box-sizing: border-box;
    width: 300px;        /* Total width including padding/border */
    height: 200px;       /* Total height including padding/border */
    padding: 20px;       /* Inside spacing */
    border: 2px solid;   /* Border */
    margin: 10px;        /* Outside spacing */
}

/* Universal border-box */
* {
    box-sizing: border-box;
}

Width and Height

/* Fixed dimensions */
.element {
    width: 300px;
    height: 200px;
}

/* Percentage dimensions */
.element {
    width: 50%;
    height: 100%;
}

/* Viewport units */
.element {
    width: 50vw;         /* 50% of viewport width */
    height: 100vh;       /* 100% of viewport height */
    min-height: 100vh;   /* Minimum viewport height */
}

/* Auto dimensions */
.element {
    width: auto;         /* Content-based width */
    height: auto;        /* Content-based height */
}

/* Min/Max dimensions */
.element {
    min-width: 200px;
    max-width: 800px;
    min-height: 100px;
    max-height: 500px;
}

Padding

/* Individual sides */
.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;
}

/* Shorthand - 4 values (top, right, bottom, left) */
.element {
    padding: 10px 20px 15px 25px;
}

/* Shorthand - 3 values (top, left/right, bottom) */
.element {
    padding: 10px 20px 15px;
}

/* Shorthand - 2 values (top/bottom, left/right) */
.element {
    padding: 10px 20px;
}

/* Shorthand - 1 value (all sides) */
.element {
    padding: 20px;
}

/* Percentage padding */
.element {
    padding: 5%;         /* Relative to parent width */
}

Border

/* Individual properties */
.element {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

/* Shorthand */
.element {
    border: 2px solid #333;
}

/* Individual sides */
.element {
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double orange;
}

/* Border styles */
.element {
    border-style: solid;     /* Solid line */
    border-style: dashed;    /* Dashed line */
    border-style: dotted;    /* Dotted line */
    border-style: double;    /* Double line */
    border-style: groove;    /* 3D grooved */
    border-style: ridge;     /* 3D ridged */
    border-style: inset;     /* 3D inset */
    border-style: outset;    /* 3D outset */
    border-style: none;      /* No border */
    border-style: hidden;    /* Hidden border */
}

/* Border radius */
.element {
    border-radius: 10px;             /* All corners */
    border-radius: 10px 20px;        /* Top-left/bottom-right, top-right/bottom-left */
    border-radius: 10px 20px 30px;   /* Top-left, top-right/bottom-left, bottom-right */
    border-radius: 10px 20px 30px 40px; /* Top-left, top-right, bottom-right, bottom-left */
    
    /* Individual corners */
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    
    /* Circular element */
    border-radius: 50%;
}

Margin

/* Individual sides */
.element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
}

/* Shorthand - same as padding */
.element {
    margin: 10px 20px 15px 25px;  /* 4 values */
    margin: 10px 20px 15px;       /* 3 values */
    margin: 10px 20px;            /* 2 values */
    margin: 20px;                 /* 1 value */
}

/* Auto margins for centering */
.element {
    margin: 0 auto;               /* Center horizontally */
    margin-left: auto;            /* Push to right */
    margin-right: auto;           /* Push to left */
}

/* Negative margins */
.element {
    margin-top: -10px;            /* Move up */
    margin-left: -20px;           /* Move left */
}

Display Properties

Display Types

/* Block elements */
.element {
    display: block;               /* Full width, new line */
}

/* Inline elements */
.element {
    display: inline;              /* Content width, no new line */
}

/* Inline-block */
.element {
    display: inline-block;        /* Block behavior, inline flow */
}

/* None */
.element {
    display: none;                /* Hidden, no space */
}

/* Flexbox */
.element {
    display: flex;                /* Flexbox container */
    display: inline-flex;         /* Inline flexbox */
}

/* Grid */
.element {
    display: grid;                /* CSS Grid container */
    display: inline-grid;         /* Inline grid */
}

/* Table display */
.element {
    display: table;               /* Table container */
    display: table-cell;          /* Table cell */
    display: table-row;           /* Table row */
    display: table-column;        /* Table column */
}

Visibility

/* Visible */
.element {
    visibility: visible;          /* Default, visible */
}

/* Hidden */
.element {
    visibility: hidden;           /* Hidden, preserves space */
}

/* Collapse (for table elements) */
.element {
    visibility: collapse;         /* Collapse table row/column */
}

Positioning

Position Types

/* Static (default) */
.element {
    position: static;             /* Normal document flow */
}

/* Relative */
.element {
    position: relative;           /* Relative to normal position */
    top: 10px;                   /* Move down 10px */
    right: 20px;                 /* Move left 20px */
    bottom: 15px;                /* Move up 15px */
    left: 25px;                  /* Move right 25px */
}

/* Absolute */
.element {
    position: absolute;           /* Relative to nearest positioned parent */
    top: 0;                      /* Top edge */
    right: 0;                    /* Right edge */
    bottom: 0;                   /* Bottom edge */
    left: 0;                     /* Left edge */
}

/* Fixed */
.element {
    position: fixed;              /* Relative to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

/* Sticky */
.element {
    position: sticky;             /* Sticky positioning */
    top: 0;                      /* Stick to top when scrolling */
}

Z-Index

/* Stacking order */
.element {
    z-index: 1;                  /* Higher numbers = front */
    z-index: 999;                /* Very high */
    z-index: -1;                 /* Behind other elements */
    z-index: auto;               /* Default stacking */
}

Flexbox

Flex Container

/* Basic flex container */
.container {
    display: flex;
    flex-direction: row;          /* Default: left to right */
    flex-direction: row-reverse;  /* Right to left */
    flex-direction: column;       /* Top to bottom */
    flex-direction: column-reverse; /* Bottom to top */
}

/* Flex wrapping */
.container {
    flex-wrap: nowrap;            /* Default: single line */
    flex-wrap: wrap;              /* Multiple lines */
    flex-wrap: wrap-reverse;      /* Multiple lines, reverse */
}

/* Shorthand */
.container {
    flex-flow: row wrap;          /* direction + wrap */
}

Flex Container Alignment

/* Main axis alignment */
.container {
    justify-content: flex-start;      /* Default: start */
    justify-content: flex-end;        /* End */
    justify-content: center;          /* Center */
    justify-content: space-between;   /* Space between items */
    justify-content: space-around;    /* Space around items */
    justify-content: space-evenly;    /* Equal space */
}

/* Cross axis alignment */
.container {
    align-items: stretch;             /* Default: stretch */
    align-items: flex-start;          /* Start */
    align-items: flex-end;            /* End */
    align-items: center;              /* Center */
    align-items: baseline;            /* Baseline */
}

/* Multiple lines alignment */
.container {
    align-content: stretch;           /* Default: stretch */
    align-content: flex-start;        /* Start */
    align-content: flex-end;          /* End */
    align-content: center;            /* Center */
    align-content: space-between;     /* Space between */
    align-content: space-around;      /* Space around */
}

Flex Items

/* Flex grow */
.item {
    flex-grow: 0;                     /* Default: don't grow */
    flex-grow: 1;                     /* Grow equally */
    flex-grow: 2;                     /* Grow twice as much */
}

/* Flex shrink */
.item {
    flex-shrink: 1;                   /* Default: shrink */
    flex-shrink: 0;                   /* Don't shrink */
    flex-shrink: 2;                   /* Shrink twice as much */
}

/* Flex basis */
.item {
    flex-basis: auto;                 /* Default: content size */
    flex-basis: 200px;                /* Fixed width */
    flex-basis: 50%;                  /* Percentage */
    flex-basis: 0;                    /* Zero basis */
}

/* Shorthand */
.item {
    flex: 1;                          /* grow: 1, shrink: 1, basis: 0% */
    flex: 1 1 200px;                  /* grow: 1, shrink: 1, basis: 200px */
    flex: 0 0 auto;                   /* grow: 0, shrink: 0, basis: auto */
    flex: none;                       /* grow: 0, shrink: 0, basis: auto */
    flex: auto;                       /* grow: 1, shrink: 1, basis: auto */
}

/* Self alignment */
.item {
    align-self: auto;                 /* Inherit from parent */
    align-self: flex-start;           /* Start */
    align-self: flex-end;             /* End */
    align-self: center;               /* Center */
    align-self: baseline;             /* Baseline */
    align-self: stretch;              /* Stretch */
}

/* Order */
.item {
    order: 0;                         /* Default order */
    order: 1;                         /* Move later */
    order: -1;                        /* Move earlier */
}

CSS Grid

Grid Container

/* Basic grid */
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;    /* 3 columns */
    grid-template-rows: 100px 100px;             /* 2 rows */
}

/* Grid with repeat */
.container {
    grid-template-columns: repeat(3, 1fr);       /* 3 equal columns */
    grid-template-rows: repeat(2, 100px);        /* 2 rows of 100px */
}

/* Grid with minmax */
.container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(100px, auto));
}

/* Grid areas */
.container {
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

Grid Lines and Gaps

/* Grid gaps */
.container {
    grid-gap: 20px;                  /* Row and column gap */
    grid-row-gap: 10px;              /* Row gap only */
    grid-column-gap: 15px;           /* Column gap only */
    
    /* Newer syntax */
    gap: 20px;                       /* Row and column gap */
    row-gap: 10px;                   /* Row gap only */
    column-gap: 15px;                /* Column gap only */
}

/* Grid alignment */
.container {
    justify-items: start;            /* Start of grid area */
    justify-items: end;              /* End of grid area */
    justify-items: center;           /* Center of grid area */
    justify-items: stretch;          /* Stretch to fill */
    
    align-items: start;              /* Start of grid area */
    align-items: end;                /* End of grid area */
    align-items: center;             /* Center of grid area */
    align-items: stretch;            /* Stretch to fill */
}

Grid Items

/* Grid placement */
.item {
    grid-column: 1 / 3;              /* Start at line 1, end at line 3 */
    grid-row: 2 / 4;                 /* Start at line 2, end at line 4 */
    
    /* Shorthand */
    grid-area: 2 / 1 / 4 / 3;        /* row-start / column-start / row-end / column-end */
}

/* Grid areas */
.item {
    grid-area: header;               /* Place in header area */
    grid-area: sidebar;              /* Place in sidebar area */
}

/* Self alignment */
.item {
    justify-self: start;             /* Start of grid area */
    justify-self: end;               /* End of grid area */
    justify-self: center;            /* Center of grid area */
    justify-self: stretch;           /* Stretch to fill */
    
    align-self: start;               /* Start of grid area */
    align-self: end;                 /* End of grid area */
    align-self: center;              /* Center of grid area */
    align-self: stretch;             /* Stretch to fill */
}

Layout Techniques

Centering

/* Center horizontally with margin */
.element {
    width: 200px;
    margin: 0 auto;
}

/* Center with flexbox */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Center with grid */
.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

/* Center with absolute positioning */
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Responsive Layouts

/* Mobile-first approach */
.container {
    display: grid;
    grid-template-columns: 1fr;              /* Single column on mobile */
    gap: 20px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    }
}

/* Responsive flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 1 300px;                         /* Grow, shrink, min-width */
}

Holy Grail Layout

/* Holy Grail with CSS Grid */
.layout {
    display: grid;
    grid-template-areas: 
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 60px 1fr 60px;
    min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Responsive Holy Grail */
@media (max-width: 768px) {
    .layout {
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
    }
}

Sticky Header

/* Sticky header */
.header {
    position: sticky;
    top: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
}

/* Sticky sidebar */
.sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

Masonry-like Layout

/* Masonry with CSS Grid */
.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 0;
    grid-template-rows: masonry;
    gap: 20px;
}

/* Masonry with flexbox */
.masonry {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.masonry-item {
    flex: 1 1 200px;
    break-inside: avoid;
}