If you are web developers or web designers who are looking for ways that can create sites that work on any device, this article is for you. In this opportunity, we are going to discuss about how to create the perfect website layout system. Take a look!

Multi-Column

You may not see multi-column as the most-used CSS columns in many websites. This is quite surprising, since it’s one of the most highly flexible techniques. In fact, this would be terribly suitable to be used by those who want perfection for lists of links, like navigations, footers, search results or photo blog.

However, multi-column may not be beautiful to be used for long passage article. This is because CSS columns will require people to scroll down and up again while reading.  The only wat to present your article nicely in CSS columns is by convincing your users to scroll horizontally.

To create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 percent of the viewport, and by telling it to use columns of no less than 20em. These few line is what it takes to create good multi-column:

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

It may seem a bit like float, but much more powerful. With Flexbox, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. You can use this code to simply fit as many items on each row as possible.

ul {
display: flex;
flex-wrap: wrap;
font-size: 2.5em;
}

Viewport-relative units

You can use the vw unit, instead of using em and media queries to make sure our layout works in different viewports. However, in terms of text, viewport has a serious usability problem with using the viewport width as a unit for text though. At one point it can become too small to read on very small screens. The problem gets bigger when the user can’t increase the font size.

To avoid the font size becomes too small, you can use a calc function: font-size: calc(1em +1vw).

Viewport Calculations

To fit any text into any viewport with CSS, there’s a brilliant CodePen, such as explained in this line below:

font-size: calc(4vw + 4vh + 2vmin);

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport.

Quantity Selectors

By applying this technique, you can order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together.

Container Queries

We can’t use element queries, but we might be able to use container queries. However, you cannot style the element itself; you could only style its children which cause something like this:

article:media( min-width: 30em ) screen {
…
}

Quantity Selectors

Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. Moreover, you can also change the way they look through the number of results. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. You can apply a fantastic job in explaining quantity selectors in this article:

article {
flex-basis: 100vmax;
}
article:nth-last-of-type(n + 2),
article:nth-last-of-type(n + 2) ~ article {
flex-basis: 50vmax;
}
article:nth-last-of-type(n + 6),
article:nth-last-of-type(n + 6) ~ article {
flex-basis: 33.33vmax;
}