Usually websites use a grid layout to improve readability and the overall look and feel of the website. Grids are a shorthand. Before we had grid systems we had to write CSS declarations that were cross-browser compatible and compensated for browser rendering quirks. This took enormous time and required constant updates to keep pages from breaking as browsers were updated. The various systems allow for a framework you don’t have to manage yourself on top of everything else you are already coding. And with a community backing any widely used system, it’s one less headache you have to take on alone. Using any kind of grid system is the basis for coding out a responsive design. Meaning that your website application can respond to whatever device is accessing it, thus allowing you to make predictable design variations for a wide range of devices, but with a single set of code. It’s important you have a coherent and repeatable way of organizing your content, and that’s what grid frameworks are supposed to help you with.

If you are no big fan of CSS grid framework you might consider to use CSS flexbox or CSS grid. They become extremely popular amongst front-end developers the last couple of years. This isn’t surprising, as it has made it a lot easier for us to create dynamic layouts and align content within containers. Flexbox enjoys wider support today and it can be used to position elements on just about any size screen nearly flawlessly. CSS Grids enjoys less legacy browser support but have more layout options than Flexbox. They do not impact performance the way Flexbox can. The best solution involves the use of both together. This will reduce the total lines of code required to achieve the desired layout, while offering the most overall control.

This year will be more creative than last year. Designers seek new ways to make unique grids and layouts. By placing elements outside of the grid, across grid lines and behind each other which makes the overall website unique in a competitive market. Here are 25 website designs that take a normal grid system and purposefully breaks it.