CSS Size Properties

Master CSS width and height properties, min/max constraints, and sizing techniques for responsive, flexible layouts.

CSS size properties control the dimensions of elements. Understanding sizing is fundamental for creating responsive, well-structured layouts.

Width and Height

.element {
  width: 300px;
  height: 200px;
}

.full-width {
  width: 100%;
}

.auto-height {
  height: auto; /* Content determines height */
}

Size Units

Absolute Units

.pixels {
  width: 300px;
  height: 200px;
}

.points {
  width: 100pt; /* Rarely used */
}

Relative Units

.percent {
  width: 50%; /* Relative to parent */
  height: 100%;
}

.em {
  width: 20em; /* Relative to font-size */
}

.rem {
  width: 30rem; /* Relative to root font-size */
}

Viewport Units

.viewport-width {
  width: 100vw; /* 100% of viewport width */
}

.viewport-height {
  height: 100vh; /* 100% of viewport height */
}

.viewport-min {
  width: 50vmin; /* 50% of smaller viewport dimension */
}

.viewport-max {
  width: 50vmax; /* 50% of larger viewport dimension */
}

Min and Max Width

.constrained {
  width: 100%;
  max-width: 1200px; /* Never wider than 1200px */
  min-width: 320px; /* Never narrower than 320px */
}

.responsive {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

Min and Max Height

.min-height {
  min-height: 400px; /* At least 400px tall */
}

.max-height {
  max-height: 600px; /* No taller than 600px */
  overflow: auto; /* Scroll if content exceeds */
}

.full-screen {
  min-height: 100vh; /* At least full viewport height */
}

Box Sizing

/* Default: content-box */
.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 300 + 40 + 10 = 350px */
}

/* Better: border-box */
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 300px (includes padding and border) */
}

/* Global setting (recommended) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Aspect Ratio

.aspect-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square {
  aspect-ratio: 1; /* 1:1 ratio */
  width: 300px;
}

Fit Content

.fit-content {
  width: fit-content; /* Shrinks to content width */
}

.min-content {
  width: min-content; /* Minimum width needed */
}

.max-content {
  width: max-content; /* Maximum width of content */
}

Clamp Function

.fluid-width {
  width: clamp(300px, 50%, 800px);
  /* min, preferred, max */
}

.fluid-font {
  font-size: clamp(1rem, 2vw, 2rem);
}

Calc Function

.calculated {
  width: calc(100% - 50px);
  height: calc(100vh - 80px);
}

.sidebar-main {
  /* Sidebar */
  width: 250px;
}

.sidebar-main + main {
  width: calc(100% - 250px);
}

Intrinsic Sizing

.intrinsic {
  width: min(100%, 800px); /* Smaller of the two */
}

.flexible {
  width: max(300px, 50%); /* Larger of the two */
}

Responsive Sizing

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
  }
}

Fluid Typography

.fluid-text {
  font-size: clamp(1rem, 2.5vw, 3rem);
}

.responsive-heading {
  font-size: calc(1.5rem + 1vw);
}

Common Patterns

Full Width Container

.full-width {
  width: 100%;
  max-width: 100%;
}

Centered Container

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

Full Viewport

.full-viewport {
  width: 100vw;
  height: 100vh;
}

.layout {
  display: flex;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.main {
  width: 100%;
  flex: 1;
}

Card Sizing

.card {
  width: 100%;
  max-width: 400px;
  min-height: 200px;
}

Hero Section

.hero {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
}

Image Sizing

img {
  max-width: 100%;
  height: auto; /* Maintains aspect ratio */
}

.fixed-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Grid Sizing

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Flex Sizing

.flex-container {
  display: flex;
  gap: 20px;
}

.flex-item {
  flex: 1; /* Equal width */
}

.flex-fixed {
  width: 200px;
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 2; /* Twice as wide as others */
}

Best Practices

Sizing Best Practices

Use box-sizing: border-box globally
Prefer max-width over fixed width for responsiveness
Use relative units (%, rem, em) for flexibility
Set max-width on containers to prevent excessive line lengths
Use min-height instead of height for content flexibility
Combine viewport units with max/min for fluid sizing
Use clamp() for responsive sizing
Test on different screen sizes
Consider content when setting heights
Use aspect-ratio for media elements

Performance Tips

Avoid layout thrashing (batch size changes)
Use CSS transforms for animations, not width/height
Minimize reflows by changing sizes together
Use will-change for animated sizes (sparingly)

Accessibility

Ensure text remains readable at different sizes
Maintain minimum touch target sizes (44x44px)
Test with browser zoom
Allow text reflow at small sizes
Don't restrict height too much

Browser Support

aspect-ratio: Modern browsers
clamp(), min(), max(): Modern browsers
fit-content: Modern browsers
Viewport units: Excellent support

Master sizing to create flexible, responsive layouts that work beautifully across all devices!

CSS size properties control the dimensions of elements. Understanding sizing is fundamental for creating responsive, well-structured layouts.

Width and Height

.element {
  width: 300px;
  height: 200px;
}

.full-width {
  width: 100%;
}

.auto-height {
  height: auto; /* Content determines height */
}

Size Units

Absolute Units

.pixels {
  width: 300px;
  height: 200px;
}

.points {
  width: 100pt; /* Rarely used */
}

Relative Units

.percent {
  width: 50%; /* Relative to parent */
  height: 100%;
}

.em {
  width: 20em; /* Relative to font-size */
}

.rem {
  width: 30rem; /* Relative to root font-size */
}

Viewport Units

.viewport-width {
  width: 100vw; /* 100% of viewport width */
}

.viewport-height {
  height: 100vh; /* 100% of viewport height */
}

.viewport-min {
  width: 50vmin; /* 50% of smaller viewport dimension */
}

.viewport-max {
  width: 50vmax; /* 50% of larger viewport dimension */
}

Min and Max Width

.constrained {
  width: 100%;
  max-width: 1200px; /* Never wider than 1200px */
  min-width: 320px; /* Never narrower than 320px */
}

.responsive {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

Min and Max Height

.min-height {
  min-height: 400px; /* At least 400px tall */
}

.max-height {
  max-height: 600px; /* No taller than 600px */
  overflow: auto; /* Scroll if content exceeds */
}

.full-screen {
  min-height: 100vh; /* At least full viewport height */
}

Box Sizing

/* Default: content-box */
.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 300 + 40 + 10 = 350px */
}

/* Better: border-box */
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 300px (includes padding and border) */
}

/* Global setting (recommended) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Aspect Ratio

.aspect-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square {
  aspect-ratio: 1; /* 1:1 ratio */
  width: 300px;
}

Fit Content

.fit-content {
  width: fit-content; /* Shrinks to content width */
}

.min-content {
  width: min-content; /* Minimum width needed */
}

.max-content {
  width: max-content; /* Maximum width of content */
}

Clamp Function

.fluid-width {
  width: clamp(300px, 50%, 800px);
  /* min, preferred, max */
}

.fluid-font {
  font-size: clamp(1rem, 2vw, 2rem);
}

Calc Function

.calculated {
  width: calc(100% - 50px);
  height: calc(100vh - 80px);
}

.sidebar-main {
  /* Sidebar */
  width: 250px;
}

.sidebar-main + main {
  width: calc(100% - 250px);
}

Intrinsic Sizing

.intrinsic {
  width: min(100%, 800px); /* Smaller of the two */
}

.flexible {
  width: max(300px, 50%); /* Larger of the two */
}

Responsive Sizing

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
  }
}

Fluid Typography

.fluid-text {
  font-size: clamp(1rem, 2.5vw, 3rem);
}

.responsive-heading {
  font-size: calc(1.5rem + 1vw);
}

Common Patterns

Full Width Container

.full-width {
  width: 100%;
  max-width: 100%;
}

Centered Container

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

Full Viewport

.full-viewport {
  width: 100vw;
  height: 100vh;
}

.layout {
  display: flex;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.main {
  width: 100%;
  flex: 1;
}

Card Sizing

.card {
  width: 100%;
  max-width: 400px;
  min-height: 200px;
}

Hero Section

.hero {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
}

Image Sizing

img {
  max-width: 100%;
  height: auto; /* Maintains aspect ratio */
}

.fixed-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Grid Sizing

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Flex Sizing

.flex-container {
  display: flex;
  gap: 20px;
}

.flex-item {
  flex: 1; /* Equal width */
}

.flex-fixed {
  width: 200px;
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 2; /* Twice as wide as others */
}

Best Practices

Sizing Best Practices

Use box-sizing: border-box globally
Prefer max-width over fixed width for responsiveness
Use relative units (%, rem, em) for flexibility
Set max-width on containers to prevent excessive line lengths
Use min-height instead of height for content flexibility
Combine viewport units with max/min for fluid sizing
Use clamp() for responsive sizing
Test on different screen sizes
Consider content when setting heights
Use aspect-ratio for media elements

Performance Tips

Avoid layout thrashing (batch size changes)
Use CSS transforms for animations, not width/height
Minimize reflows by changing sizes together
Use will-change for animated sizes (sparingly)

Accessibility

Ensure text remains readable at different sizes
Maintain minimum touch target sizes (44x44px)
Test with browser zoom
Allow text reflow at small sizes
Don't restrict height too much

Browser Support

aspect-ratio: Modern browsers
clamp(), min(), max(): Modern browsers
fit-content: Modern browsers
Viewport units: Excellent support

Master sizing to create flexible, responsive layouts that work beautifully across all devices!

CSS Size Properties

On this page

CSS Size Properties

On this page