CSS Width and Height

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

.hero {
  width: 100%;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

Let me ask you something.

Have you ever wanted an element to be exactly a certain size? A card that is always 300px wide. A hero section that fills the entire screen height. An image that never gets bigger than its container.

All of that is controlled by width and height. They sound simple and mostly they are. But there are a few things about how they work that are not obvious at first and once you understand them your layouts will start behaving exactly the way you want.

Setting Width and Height

The most straightforward way to set the size of an element is to give it a fixed pixel value.

The card is exactly 300px wide and 200px tall no matter what.

Simple. But fixed pixel values are not always what you want. What if the screen is smaller than 300px? The card would overflow. That is where flexible units come in.

Width Using Percentage

A percentage width makes the element a proportion of its parent element's width. If the parent is 1000px wide and you set width to 50% the element becomes 500px.

The card takes up half the container width. If you resize the container the card adjusts automatically.

This is the foundation of responsive design. Instead of fixed sizes that break on small screens you use percentages that adapt.

Width Using vw and vh

vw stands for viewport width and vh stands for viewport height. The viewport is just the visible area of the browser window.

1vw equals 1 percent of the viewport width. 1vh equals 1 percent of the viewport height.

So 100vw means the full width of the browser window. 100vh means the full height of the browser window.

The hero section now fills the entire browser window. No matter how big or small the screen is it always takes up 100 percent of the visible area.

This is exactly how full screen hero sections are built on real websites. You will use 100vh constantly for landing page heroes, full screen backgrounds, and splash screens.

min-width and max-width

Sometimes you do not want a fixed size. You want the element to be flexible but within limits. That is what min and max values are for.

min-width — the element will never be smaller than this value.

max-width — the element will never be larger than this value.

The card stretches to fill its container but never gets wider than 600px. On a large screen it sits centered at 600px. On a small screen it fills the full width.

This is the most common pattern for content containers on real websites. You want the content to be flexible on small screens but not stretch uncomfortably wide on large ones.

min-height and max-height

The same concept applies to height.

min-height — the element will never be shorter than this value even if the content is small.

max-height — the element will never be taller than this value even if the content overflows.

The hero section is always at least the full viewport height. But if the content inside grows taller the section grows with it. It never gets smaller than the screen but it can get bigger if needed.

This is better than height: 100vh for most hero sections because if the content is taller than the screen it does not get cut off.

height: auto

Setting height to auto tells the browser to calculate the height automatically based on the content inside. This is actually the default behavior for most elements.

You will use height: auto most often when overriding a fixed height that was set somewhere else or when dealing with images to preserve their aspect ratio.

The image is 300px wide and the height adjusts automatically to keep the original proportions. No stretching, no squishing.

Building the Netflix Clone

Let us give our Netflix clone proper sizing. The hero section should fill the entire screen height and the content inside should have a maximum width so it does not stretch too wide on large screens.

The body fills the full screen height. The hero content is capped at 700px wide and centered so it never stretches uncomfortably on large screens. The page is looking more and more like a real product.