Creating a good system that can represent your need sometimes obtains extra effort on it, especially for web designers who are building website layout system. If you do not have a right picture on how to create a perfect website layout system, you can take a look on the points below as your inspiration.
Multi-Column
Even though, multi column is a highly flexible technique and perfectly suitable for lists of links, like navigations, footers, search results or photo blogs, you can see that not many websites use CSS columns. This is because they are horrible to use when the article is higher than the viewport which makes people scroll down and up while reading the article. Therefore, to avoid making your users scroll up and down, you can simplify the design of your site through scrolling it horizontally and setting the height of the article to a maximum of 100 per cent of the viewport with no less than 20em for columns. It may changeling to encourage your visitors to scroll horizontally. As a solution, you could add new UI elements to clear this up or you could choose to always make sure the columns never fit completely in the viewport by doing the code below:
article { columns: 20em; /* never be smaller than 20em */ height: 100vh; /* be as high as the viewport */ width: 75vw; /* be 75% of the width of the viewport */ }
Flexbox and the Viewport
According to Tab Atkins, Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).
For some people it sounds like float, but if you look closer, you will understand that it’s more powerful. Flexbox enables you to create simple looking layouts which are impossible to be made few years ago. For instance, if there is any white space leftover, it can tell you what to do with them, such as leave it at one of the ends, you can also distribute it evenly between or around them, or you can decide to stretch the items. Moreover, you can try using media queries, if you want the browser to simply fit as many items on each row as possible.
Quantity Selectors
This technique provides more advantages rather than float, CSS columns, and flexbox with viewport calculations. Moreover, you can make the browser performs the task in a certain manner. In fact, you can let the browser and the content figure it out together instead of designing every possible layout for every possible screen size.
It may not always work, so at some points you will need finer control over the different layouts, and for extreme screen sizes you need to define exceptions. In the case, media queries are a fantastic tool that you surely need.