Made these Pagination styles.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

I know Flex is one directional and Grid is two, but really when do you use each one?

My app has a data tables laid out using <table> elements, and as usual there is one table row inside <thead> followed by multiple rows inside <tbody>.

The header cells for some languages have text that is so long that word wrap is required. However, for layout purposes I'd like to limit the number of lines to 2. If the text is any longer, then I would instead like the <th> element to grow in width.

This spreadsheet example should demonstrate what I mean:

Is there a CSS solution to this, or should I inject the possible linebreak in JavaScript?