You all know the Single Page Layout of HTML pages. It means you have mainly only one page loaded. The page splits up the layout into different sections to get a clear and modern page design. There are a lot of web sites explaining this kind of modern web design and you can find hundreds of templates on different places like onepagelove.com. I also picked up such a design template to build a new site. As always the template is not perfect and you want to tweak it a little bit, to get your own individual style. After I looked into the CSS file and the layout setup, I was shocked. The CSS consisted of more then 2400 lines of code! And each HTML tag was applied with more than 5 style classes in average. For example a simple section within a 2-column layout looked something like this:
...
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-16">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">100% Open Source</h2>
<div class="grid grid-cols-2 gap-8 text-gray-500 sm:gap-12 sm:grid-cols-3 lg:grid-cols-6 dark:text-gray-400">
.....
....
....
So I asked my self: is this complexity needed? You may guess it – my answer is ‘no’. Now let me explain what is needed for a simple single page layout.
The Grid Layout
To design a good-looking website, you need to follow the principle of the golden ratio. This principle was discovered by Leonardo Da Vinci 500 years ago and is nothing new. To make it short: you split up your page into 12 columns and place the elements inside. For example to get an 2/3 ratio you place one block into columns 1-4 and the rest into 5-12.
Often this is archived with defining a lot col-classes for each ratio like this:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}You my see this kind of css classes in many many layouts. But you don’t need this as you can use the grid design rule supported today by all modern browsers.
To use the grid layout you simply define your container class as a grid with 12 columns. The browser overtakes the column layout for you. See the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
max-width: 1280px;
border: 1px dashed;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(12, minmax(69px, 110px));
}
</style>
</head>
<body>
<section class="container">
<div style="grid-column-start: span 4; border: 1px solid green;">
<p>The left column with some text...</p>
</div>
<div style="grid-column-start: span 8; border: 1px solid blue;">
<p>The right column.....</p>
</div>
</section>
</body>
</html>The important part here is the style class for the section defining a grid with 12 columns
display: grid;
grid-template-columns: repeat(12, minmax(64px, 110px));If you inspect the page with your browsers developer tools, you can see that the section is divided into 12 parts like Leonardo Da Vinci would do it.
So this is quite simple. And I do not use any css classes for my column sections. It is quite enough if you set the grid-column-start directly in the style attribute.
<div style="grid-column-start: span 4;">
...
</div>Get Responsive
Finally you may want to get more responsive. My first example has a minimal width of 768px as each column is defined with a minim width of 64px. In small displays this is not perfect. So lets define a responsive design to cancel out 12 column ration if the display is smaller then 768 px. This can be done with a @meia definition:
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}This code creates a flexible “auto-responsive” grid in which elements are always at least 280 pixels wide. But now, the grid automatically reduces the number of columns as soon as the width falls below 280 pixels.
So we simply changed from 12 columns to responsive design. Thant’s it.