The CSS calc() function computes property values from arithmetic expressions involving CSS values and units. It is useful when a layout needs a relationship rather than a fixed number. section 5.4.2
Use calc() to:
- Subtract padding and margins from a percentage: height: calc(100% - 4rem) fills a card without exceeding its available space. section 5.4.2
- Create a negative offset: calc(-1 * var(--imageSize) / 3) moves an image upward by one third of its size. section 6.5.2
- Reserve space for that offset: calc(var(--imageSize) / 3 + 24px) keeps the image from being clipped on short screens. section 6.5.2
Sizing and positioning a card
A card’s inner container can use height: calc(100% - 4rem) with grid-template-rows: min-content auto min-content. The header and link take only the space they need, while the paragraph receives the remainder. A profile card can similarly combine calc() with --imageSize to let a circular image overlap the card while preserving space above it. section 5.4.2 section 6.5.2
Listing 5.14 Inner container layout adjustments
main > section > div {
background-color: rgba(0, 0, 0, .75);
margin: 1rem;
padding: 1rem;
color: whitesmoke;
text-align: center;
height: calc(100% - 4rem);
display: grid;
grid-template-rows: min-content auto min-content;
align-items: center;
}
section h2 {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0;
}
View the complete inner-container rule using calc() alongside CSS Grid row sizing and centered alignment. section 5.4.2
Listing 6.7 Positioning the image
.card {
...
text-align: center;
margin: calc(var(--imageSize) / 3 + 24px) 24px; #1
}
img {
width: var(--imageSize);
height: var(--imageSize);
object-fit: cover;
border-radius: 50%;
margin-top: calc(-1 * var(--imageSize) / 3); #2
}
View the profile-card rule using calc() with a custom property for both image overlap and protective card spacing. section 6.5.2
