Home / Bold and Raw / Swiss Grid
Swiss Grid CSS Template, Free with Live Demo
Free Swiss style website template with a strict 12 column CSS grid, clean sans serif type and a red accent. Live demo, key CSS and HTML download. The example is Grid Days, a design conference in Zurich.
What is swiss grid?
Swiss style, also called the International Typographic Style, comes from 1950s poster design in Switzerland. It uses a strict grid, clean sans serif letters, left aligned text and lots of white space. One strong color, often red, does all the work.
On the web it maps perfectly to CSS Grid. Every element starts and ends on a column line, so the page feels calm and ordered even when the type is huge.
Good for
- Conferences and events
- Architecture and design studios
- Museums and galleries
- Annual reports and serious brands
What you get in this template
- 12 column CSS grid used on every row
- Giant red number as the hero element
- Programme list aligned to the same columns
- Full width red ticket block
- Collapses to a single column on phones
The key CSS
This is the part that makes the swiss grid look work. Copy it into your own project.
.g {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 20px;
max-width: 1200px; margin: 0 auto;
}
.num { grid-column: 1 / 6; font-size: 17rem; color: #e2231a; }
.ht { grid-column: 7 / 13; align-self: end; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is Swiss style in web design?
It is a design approach based on a strict grid, sans serif type, asymmetric layouts and plenty of white space. It started in Swiss poster design and still shapes modern websites.
How do I build a Swiss grid with CSS?
Use display: grid with grid-template-columns: repeat(12, 1fr), then place each element with grid-column, for example grid-column: 7 / 13. Keep every item on the same column lines.
Which fonts suit Swiss style?
Helvetica is the classic choice. Free alternatives include Archivo, Inter Tight and Public Sans.
More Bold and Raw designs
011. Neo Brutalism
Stackd, an invoicing tool for freelancers
012. Raw Brutalist
KXLR, a community radio station
014. Bold Type Hero
Pace, a running club
015. Anti Design
Static Bloom, an indie record label
016. Y2K Revival
Starlite, a mixtape playlist site
017. Memphis
Confetti Co., a party planner
018. Retro Pixel
Frog Knight, an indie game launch page
019. Newspaper Editorial
The Harbor Gazette, a local news site