Posts in Category: css tricks

Preventing a Grid Blowout

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.

.grid {
  display: grid;
  grid-template-columns: 1fr 300px;

That’s somewhat robust. That 1fr column will take up any remaining space left behind by the

Read More

The Shapes of CSS

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you

Read More

A Minimal JavaScript Setup

Some people prefer to write JavaScript with React. For others, it’s Vue or jQuery. For others still, it is their own set of tools or a completely blank document. Some setups are minimal, some allow you to get things done quickly, and some are crazy powerful, allowing you to build

Read More