Hackforge Academy

Explanation

CSS provides different units to define sizes. Modern units like rem, em, %, vw, vh, and fr help create responsive layouts.

Code:

.box {
  width: 50%;
  height: 200px;
}

Explanation

The rem unit is relative to the root font size, making it ideal for consistent typography across a website.

Code:

h1 {
  font-size: 2rem;
}

Explanation

Viewport units (vw and vh) size elements relative to the browser window.

Code:

.hero {
  width: 100vw;
  height: 100vh;
}

Explanation

The fr unit is used in CSS Grid to distribute available space evenly among columns or rows.

Code:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Explanation

Percentage units (%) allow elements to resize relative to their parent container, improving responsiveness.

Code:

.card {
  width: 80%;
}