HTML, CSS, JavaScript & PHP
I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn’t figure out why.
The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn’t working. Why not? And what to do about it?
What: When using CSS columns, the content doesn’t always line up at the top of each new column. The more columns you have, the more likely you are to run into this problem, especially if you’re using column-fill: balance. And the problem seems to happen in Chrome-based browsers, in Safari and in browsers on iOS.
What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re creating a multi-column layout.