Layout med gitre og gyldne snit

Den mest udbredte og effektive metode at designe websider på, var indtil for få år siden at sætte hele layoutet op i et gitter bestående af tabeller. I dag er metoden forældet og ineffektiv af flere årsager, men den har fortsat den styrke, at det er utroligt nemt at sætte et gitter op, som man kan basere sit layout på.

Designer Mark Boulton er stor fortaler for brugen af gitre til opsætning af layout, både til tryk og til web. I artiklen "Five Simple Steps to Designing Grid Systems" demonstrerer Boulton, hvordan man ved hjælp af teorien om Det Gyldne Snit og tallet phi kan sætte smukke layouts sammen ved hjælp af gitre. Artiklens 3, 4 og 5 del handler specifikt om opsætning af gitre til web.

Khoi Vinh bygger videre på Boultons artikel, og demonstrerer i artiklen "Grid Computing... and Design" hvordan man nemmere kan sætte sine gitre op på websiden ved hjælp af et baggrundsbillede til udviklingsbrug, som er inddelt i gitterets respektive felter.

Gitre kan være noget besværligere at sætte op i CSS, end de er med tabeller (ikke mindst pga. de mange bugs, der er i Internet Explorer). Artiklerne her kommer dog ikke nærmere ind på den mest effektive CSS til gitrene. Men her kunne man nok skæve til Alex Robinsons artikel "In Search of the One True Layout".

Denne artikel er seneste opdateret 29 oktober 2024

Morten Brunbjerg Bech

Frontend webudvikler, designer, fritids-illustrator, bibliotekar og far til to.

Arbejder med udvikling, design og web-grafik hos TV MIDTVEST. Særligt interesseret i stramt struktureret og effektivt informationsdesign, der gør budskaber lette at forstå, serveret i en grafisk brugergrænseflade, der er nem at bruge.

Tools of the trade: Statamic, VueJS, Nuxt, Tailwind, HTML, CSS, SCSS, JavaScript, Photoshop, Illustrator, Adobe XD, etc.