This page contains some snippets I’ve found myself using again and again.

Show N lines of text

The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.

.clamp { 
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

In most cases you will also want to set overflow to hidden, otherwise the contents won’t be clipped but an ellipsis will still be shown after the specified number of lines.

Responsive Grid

The auto-fit keyword enables auto-placement of the child elements. The childrens also have a base minimum value of 150px with a maximum value 1fr, meaning on smaller screens

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

With auto-fit, the boxes will stretch as their horizontal size exceeds 150px to fill the entire remaining space. However, if you change this to auto-fill, they will not stretch when their base size in the minmax function is exceeded.

Ellipsis

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.

.ellipse { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

Both white-space: nowrap and overflow: hidden are required for text-overflow to work.

Center items

place-items is a shorthand to set both align-items and justify-items at once.

.parent { 
    display: grid; 
    place-items: center; 
}