Responsive grid without media queries

Css

auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

Download

Web & CSS grid responsive layout chris

More in Web & CSS

Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere. A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby. Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both.

Random picks

Extract matches with a regular expression Text Processing grep -o prints only the matching part, which turns grep into a crude extractor. Stop tracking a file without deleting it Git For the config file that should never have been committed. Add it to .gitignore afterwards. A README that people actually read Data Formats The order matters more than the length: what it is, how to run it, how to develop on it. Group rows into a JSON array Databases Returns one row per author with their posts nested, instead of a join that repeats the author on every row. Read a large file without loading it into memory Python Iterating a file object yields one line at a time, which is the difference between a constant footprint and an OOM. Pin a dependency to an exact version Build & CI Caret ranges are how a build that passed last week fails today. Exact versions plus a lockfile remove the surprise. Undo the last commit but keep the changes Git Moves HEAD back one commit and leaves everything staged, which is what you usually want after committing too early. Find the commit that introduced a bug Git Binary search across history. Mark a known good and a known bad commit and git narrows it down for you.