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;
}Last updated