A while ago we showed you a way to use flexbox for sorting lists and tables. This month the powerful CSS Grid layout system went unprefixed in all major browsers.
In short Grid is for two dimension grids, while Flexbox is better suited for one dimensional layouts, like a nav bar. They can work together, a grid cell can be a flexbox container and vice versa.
The grid system is rather easy to grasp, it doesn’t have much surprises.
Let’s go over to the sorting trick:
Just push the buttons or table header to sort the stuff.
How does it work
Sort the elements on text and write the grid order attribute for CSS.
<li style="grid-row-start: 7;">scstqehfr</li>
The main `win` of css sorting is you don’t need to modify the DOM, which is expensive in most browsers. That said, you need some CSS trickery to get tables look like tables at the moment a tbody has a grid or flexbox display-layout.
Read more about the Basic concepts of grid layout here.