30 seconds of CSS

Layout

Click on a snippet's name to view its code.

Box-sizing reset

Resets the box-model so that widths and heights are not affected by their borders or padding.

Demo
border-box
content-box

View snippet

Clearfix

Ensures that an element self-clears its children.

Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
Demo
float a
float b
float c

View snippet

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

Demo

View snippet

Display table centering

Vertically and horizontally centers a child element within its parent element using display: table (as an alternative to flexbox).

Demo
Centered content

View snippet

Evenly distributed children

Evenly distributes child elements within a parent element.

Demo

Item1

Item2

Item3

View snippet

Fit image in container

Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.

Demo

View snippet

Flexbox centering

Horizontally and vertically centers a child element within a parent element using flexbox.

Demo
Centered content.

View snippet

Ghost trick

Vertically centers an element in another.

Demo

Vertically centered without changing the position property.

View snippet

Grid centering

Horizontally and vertically centers a child element within a parent element using grid.

Demo
Centered content.

View snippet

Last item with remaining available height

Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.

Demo
Div 1
Div 2
Div 3

View snippet

Offscreen

A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility (ADA) development when more context is needed for visually-impaired users. As an alternative to display: none which is not readable by screen readers or visibility: hidden which takes up physical space in the DOM.

Demo

View snippet

Transform centering

Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table). Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.

Demo
Centered content

View snippet

Truncate text

If the text is longer than one line, it will be truncated and end with an ellipsis .

Demo

If I exceed one line's width, I will be truncated.

View snippet

Truncate text multiline

If the text is longer than one line, it will be truncated for n lines and end with an gradient fade.

Demo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

View snippet