Hacker News Reader

Comment by dheera | Hacker News Reader

So many years into CSS and it's still damn near impossible to (a) vertically center multi-line text in a div (b) set the width of a div or video in units other than pixels and let the height be set based on an aspect ratio. Both result in nested div hell.

View on HN

The answer to (a) (along with many other things) is to use Flexbox:

  .my-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

This should work for (b) as long as the height isn't in terms of a percentage:

  .my-video {
    --my-video-height: 120px;
    height: var(--my-video-height);
    width: calc(var(--my-video-height) * 16/9);
  }

You can also use grid and the place-content shorthand!

These things are getting better. CSS was a nightmare in the 2000s.

Even I'll admit that Grid is complicated. It serves a valid use-case, but it's honestly a very rare one in my experience and the learning curve is steep

Personally I love CSS Grid. It allows me to move contents around easily from Desktop to Mobile view just by defining different grid-template-areas.

Grid is nice but overused in my opinion. However, at the end of the day whatever gets the job done and is sane is a valid solution in my eyes but I prefer to think of grid as anything requiring centering on two-axis and/or macroscopic to the task at hand.

So for instance I would do the responsive page layout in grid, probably. Then I would do positioning the elements within a article or section with flexbox.

This is the intended use of grid and flexbox for sure. Unfortunately most developers seem to abuse either one or the other.

Wow thanks, I'll try this! (for (a) I was using table->table-row->table-cell to get vertically centered text before).

Reply on news.ycombinator.com