CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Veraltete Layoutmethoden - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Legacy layout methods" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="en"/><link rel="alternate" title="Méthodes de mises en page traditionnelles" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="fr"/><link rel="alternate" title="古いレイアウト方法" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="ja"/><link rel="alternate" title="레거시 레이아웃 메서드" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="ko"/><link rel="alternate" title="传统的布局方法" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="zh"/><link rel="alternate" title="Veraltete Layoutmethoden" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Rastersysteme sind ein sehr gebräuchliches Merkmal in CSS-Layouts und wurden vor dem CSS-Grid-Layout meist mit floats oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine festgelegte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalts-Spalten in diese imaginären Spalten. In diesem Artikel werden wir diese älteren Methoden untersuchen, um zu verstehen, wie sie verwendet wurden, falls Sie an einem älteren Projekt arbeiten."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods"/><meta property="og:title" content="Veraltete Layoutmethoden - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Rastersysteme sind ein sehr gebräuchliches Merkmal in CSS-Layouts und wurden vor dem CSS-Grid-Layout meist mit floats oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine festgelegte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalts-Spalten in diese imaginären Spalten. In diesem Artikel werden wir diese älteren Methoden untersuchen, um zu verstehen, wie sie verwendet wurden, falls Sie an einem älteren Projekt arbeiten."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-css document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Kern-Lernmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/CSS_layout" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS-Layout</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Veraltete Layoutmethoden</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#layout-_und_rastersysteme_vor_dem_css-grid-layout">Layout- und Rastersysteme vor dem CSS-Grid-Layout</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ein_layout_mit_zwei_spalten">Ein Layout mit zwei Spalten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einfache_veraltete_raster-frameworks_erstellen">Einfache, veraltete Raster-Frameworks erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#flexbox-raster">Flexbox-Raster?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dritthersteller-rastersysteme">Dritthersteller-Rastersysteme</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#layout-_und_rastersysteme_vor_dem_css-grid-layout">Layout- und Rastersysteme vor dem CSS-Grid-Layout</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ein_layout_mit_zwei_spalten">Ein Layout mit zwei Spalten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einfache_veraltete_raster-frameworks_erstellen">Einfache, veraltete Raster-Frameworks erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#flexbox-raster">Flexbox-Raster?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dritthersteller-rastersysteme">Dritthersteller-Rastersysteme</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Veraltete Layoutmethoden</h1></header><div class="section-content"><p>Rastersysteme sind ein sehr gebräuchliches Merkmal in CSS-Layouts und wurden vor dem CSS-Grid-Layout meist mit <code>floats</code> oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine festgelegte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalts-Spalten in diese imaginären Spalten. In diesem Artikel werden wir diese älteren Methoden untersuchen, um zu verstehen, wie sie verwendet wurden, falls Sie an einem älteren Projekt arbeiten.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Grundlagen von HTML (lernen Sie die <a href="/de/docs/Learn_web_development/Core/Structuring_content">Einführung in HTML</a>), und eine Vorstellung davon, wie CSS funktioniert (lernen Sie die <a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen der CSS-Gestaltung</a>.) </td> </tr> <tr> <th scope="row">Ziel:</th> <td> Die grundlegenden Konzepte hinter den Rastersystemen zu verstehen, die verwendet wurden, bevor CSS-Grid-Layout in Browsern verfügbar war. </td> </tr> </tbody> </table></figure></div><section aria-labelledby="layout-_und_rastersysteme_vor_dem_css-grid-layout"><h2 id="layout-_und_rastersysteme_vor_dem_css-grid-layout"><a href="#layout-_und_rastersysteme_vor_dem_css-grid-layout">Layout- und Rastersysteme vor dem CSS-Grid-Layout</a></h2><div class="section-content"><p>Es mag für jemanden mit Design-Hintergrund überraschend erscheinen, dass CSS bis vor kurzem kein eingebautes Rastersystem hatte und stattdessen verschiedene suboptimale Methoden verwendet wurden, um rasterähnliche Designs zu erstellen. Wir sprechen jetzt von diesen Methoden als vom "veralteten" Methoden.</p> <p>Bei neuen Projekten wird in den meisten Fällen CSS-Grid-Layout in Kombination mit einer oder mehreren anderen modernen Layoutmethoden verwendet, um die Grundlage für ein Layout zu bilden. Sie werden jedoch von Zeit zu Zeit auf "Rastersysteme" stoßen, die diese veralteten Methoden verwenden. Es ist sinnvoll, zu verstehen, wie sie funktionieren und warum sie sich von CSS-Grid-Layout unterscheiden.</p> <p>Diese Lektion erklärt, wie Rastersysteme und Raster-Frameworks basierend auf <code>floats</code> und <code>flexbox</code> funktionieren. Nachdem Sie das Grid-Layout studiert haben, werden Sie wahrscheinlich überrascht sein, wie kompliziert das alles erscheint! Dieses Wissen wird Ihnen hilfreich sein, wenn Sie Fallback-Code für Browser erstellen müssen, die neuere Methoden nicht unterstützen, und ermöglicht es Ihnen, an bestehenden Projekten zu arbeiten, die diese Art von Systemen verwenden.</p> <p>Es ist wichtig, sich bei der Erkundung dieser Systeme vor Augen zu halten, dass keines von ihnen tatsächlich ein Gitter auf die Weise erstellt, wie CSS-Grid-Layout ein Gitter erstellt. Sie funktionieren, indem sie Elementen eine Größe geben und diese so verschieben, dass sie sich in einer Weise ausrichten, die wie ein Gitter aussieht.</p></div></section><section aria-labelledby="ein_layout_mit_zwei_spalten"><h2 id="ein_layout_mit_zwei_spalten"><a href="#ein_layout_mit_zwei_spalten">Ein Layout mit zwei Spalten</a></h2><div class="section-content"><p>Beginnen wir mit dem einfachsten möglichen Beispiel — einem Layout mit zwei Spalten. Sie können mitmachen, indem Sie eine neue <code>index.html</code>-Datei auf Ihrem Computer erstellen, sie mit einer <a href="https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html" class="external" target="_blank">einfachen HTML-Vorlage</a> füllen und den unten stehenden Code an den entsprechenden Stellen einfügen. Am Ende des Abschnitts können Sie ein Live-Beispiel sehen, wie der endgültige Code aussehen sollte.</p> <p>Zuerst brauchen wir etwas Inhalt, den wir in unsere Spalten setzen können. Ersetzen Sie alles, was sich derzeit im Body befindet, durch Folgendes:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><h1>2 column layout example</h1> <div> <h2>First column</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> </div> <div> <h2>Second column</h2> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </div> </code></pre></div> <p>Jede der Spalten benötigt ein äußeres Element, um ihren Inhalt zu enthalten und es uns zu ermöglichen, alles auf einmal zu manipulieren. In diesem Beispiel haben wir uns für <a href="/de/docs/Web/HTML/Element/div"><code><div></code></a>-Elemente entschieden, aber Sie könnten etwas semantisch Passenderes wie <a href="/de/docs/Web/HTML/Element/article"><code><article></code></a>s, <a href="/de/docs/Web/HTML/Element/section"><code><section></code></a>s, und <a href="/de/docs/Web/HTML/Element/aside"><code><aside></code></a>s oder was auch immer wählen.</p> <p>Nun zum CSS. Zuerst einmal wenden Sie folgendes auf Ihr HTML an, um einige grundlegende Einstellungen zu treffen:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 900px; margin: 0 auto; } </code></pre></div> <p>Der <code>body</code> wird 90% der Viewport-Breite ausmachen, bis er 900px Breite erreicht, in diesem Fall bleibt er auf dieser Breite fixiert und zentriert sich im Viewport. Standardmäßig werden seine Kinder (die <a href="/de/docs/Web/HTML/Element/Heading_Elements">h1</a> und die beiden <a href="/de/docs/Web/HTML/Element/div"><code><div></code></a>s) 100% der Breite des Bodys umfassen. Wenn wir möchten, dass die beiden <a href="/de/docs/Web/HTML/Element/div"><code><div></code></a>s nebeneinander schweben, müssen wir ihre Breiten so einstellen, dass sie insgesamt 100% der Breite ihres Elternelements oder kleiner sind, damit sie nebeneinander passen. Fügen Sie dazu folgendes am Ende Ihres CSS hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } </code></pre></div> <p>Hier haben wir beide auf 48% der Breite ihres Elternelements gesetzt — das ergibt insgesamt 96% und lässt uns 4% als Abstand zwischen den beiden Spalten frei, damit der Inhalt etwas Platz zum Atmen hat. Jetzt müssen wir nur noch die Spalten schweben lassen, und zwar so:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } </code></pre></div> <p>Wenn wir alles zusammenfügen, sollte das Ergebnis so aussehen:</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A two column layout sample" id="frame_a_two_column_layout" width="100%" height="520" src="about:blank" data-live-path="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/" data-live-id="a_two_column_layout" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Sie werden hier feststellen, dass wir überall Prozentangaben für die Breiten verwenden — dies ist eine ziemlich gute Strategie, da es ein <strong>Liquid Layout</strong> schafft, das sich an verschiedene Bildschirmgrößen anpasst und dieselben Proportionen für die Spaltenbreiten bei kleineren Bildschirmgrößen beibehält. Versuchen Sie, die Breite Ihres Browserfensters anzupassen, um es selbst zu sehen. Dies ist ein wertvolles Werkzeug für responsives Webdesign.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können dieses Beispiel unter <a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html" class="external" target="_blank">0_two-column-layout.html</a> ausführen (siehe auch <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html" class="external" target="_blank">den Quellcode</a>).</p> </div></div></section><section aria-labelledby="einfache_veraltete_raster-frameworks_erstellen"><h2 id="einfache_veraltete_raster-frameworks_erstellen"><a href="#einfache_veraltete_raster-frameworks_erstellen">Einfache, veraltete Raster-Frameworks erstellen</a></h2><div class="section-content"><p>Die Mehrheit der veralteten Frameworks verwendet das Verhalten der <a href="/de/docs/Web/CSS/float"><code>float</code></a>-Eigenschaft, um eine Spalte neben einer anderen schweben zu lassen und auf diese Weise etwas zu schaffen, das wie ein Raster aussieht. Den Prozess des Erstellens eines Rasters mit <code>floats</code> durchzugehen, zeigt Ihnen, wie das funktioniert und führt auch einige komplexere Konzepte ein, die auf dem aufbauen, was Sie in der Lektion über <a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats und Aufräumen</a> gelernt haben.</p> <p>Der einfachste Raster-Framework-Typ, den man erstellen kann, ist einer mit fester Breite — wir müssen lediglich herausfinden, wie breit unser Design insgesamt sein soll, wie viele Spalten wir wollen und wie breit die Abstände und Spalten sein sollten. Wenn wir stattdessen beschließen, unser Design auf einem Raster anzuordnen, bei dem die Spalten je nach Browserbreite wachsen und schrumpfen, müssten wir prozentuale Breiten für die Spalten und die Abstände zwischen ihnen berechnen.</p> <p>In den nächsten Abschnitten werden wir uns ansehen, wie man beides erstellt. Wir werden ein 12-Spalten-Gitter erstellen — eine sehr häufige Wahl, die als sehr anpassungsfähig für verschiedene Situationen angesehen wird, da 12 gut durch 6, 4, 3 und 2 teilbar ist.</p></div></section><section aria-labelledby="ein_einfaches_raster_mit_fester_breite"><h3 id="ein_einfaches_raster_mit_fester_breite"><a href="#ein_einfaches_raster_mit_fester_breite">Ein einfaches Raster mit fester Breite</a></h3><div class="section-content"><p>Lassen Sie uns zuerst ein Rastersystem erstellen, das feste Breiten für die Spalten verwendet.</p> <p>Beginnen Sie damit, eine lokale Kopie unserer Beispiel- <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html" class="external" target="_blank">simple-grid.html</a>-Datei zu erstellen, die das folgende Markup in ihrem Body enthält.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col span1">13</div> <div class="col span6">14</div> <div class="col span3">15</div> <div class="col span2">16</div> </div> </div> </code></pre></div> <p>Das Ziel ist es, dies in ein Demonstrationsraster mit zwei Zeilen auf einem zwölfspaltigen Raster zu verwandeln — die obere Zeile demonstriert die Größe der einzelnen Spalten, die zweite Zeile einige unterschiedlich große Bereiche auf dem Raster.</p> <p><img src="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/simple-grid-finished.png" alt="CSS-Raster mit 16 Rasterelementen, verteilt auf zwölf Spalten und zwei Reihen. Die obere Reihe hat 12 gleichbreite Rasterelemente in 12 Spalten. Die zweite Reihe hat Rasterelemente unterschiedlicher Größe. Element 13 umfasst 1 Spalte, Element 14 umfasst sechs Spalten, 15 umfasst drei und 16 umfasst zwei." width="952" height="50" loading="lazy"></p> <p>Im <a href="/de/docs/Web/HTML/Element/style"><code><style></code></a>-Element, fügen Sie den folgenden Code hinzu, der dem Wrapper-Container eine Breite von 980 Pixeln gibt, mit einem Polster auf der rechten Seite von 20 Pixeln. Dadurch bleiben uns 960 Pixel für unsere gesamten Spalten-/Abstandsbreiten — in diesem Fall wird das Polster von der gesamten Inhaltsbreite abgezogen, weil wir <a href="/de/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> auf <code>border-box</code> für alle Elemente auf der Seite gesetzt haben (siehe <a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model#the_alternative_css_box_model">Das alternative CSS-Boxmodell</a> für eine ausführlichere Erklärung).</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>* { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } </code></pre></div> <p>Jetzt verwenden Sie den Zeilen-Container, der um jede Zeile des Rasters gewickelt ist, um den Abstand von einer Zeile zur nächsten zu klären. Fügen Sie die folgende Regel unter Ihrer vorherigen hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.row { clear: both; } </code></pre></div> <p>Das Anwenden dieser Klärung bedeutet, dass wir nicht jede Zeile vollständig mit Elementen füllen müssen, um die vollen zwölf Spalten zu machen. Die Zeilen bleiben getrennt und beeinträchtigen sich nicht gegenseitig.</p> <p>Die Abstände zwischen den Spalten sind 20 Pixel breit. Wir erstellen diese Abstände als einen linken Rand auf jeder Spalte — einschließlich der ersten Spalte, um die 20 Pixel Polster auf der rechten Seite des Containers auszugleichen. Insgesamt haben wir also 12 Abstände — 12 x 20 = 240.</p> <p>Wir müssen das von unserer Gesamtbreite von 960 Pixel abziehen, was uns 720 Pixel für unsere Spalten gibt. Wenn wir das jetzt durch 12 teilen, wissen wir, dass jede Spalte 60 Pixel breit sein sollte.</p> <p>Unser nächster Schritt ist, eine Regel für die Klasse <code>.col</code> zu erstellen, die sie nach links floatet, ihr einen <a href="/de/docs/Web/CSS/margin-left"><code>margin-left</code></a> von 20 Pixeln gibt, um den Rand zu bilden, und eine <a href="/de/docs/Web/CSS/width"><code>width</code></a> von 60 Pixeln hat. Fügen Sie die folgende Regel am Ende Ihres CSS hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col { float: left; margin-left: 20px; width: 60px; background: rgb(255 150 150); } </code></pre></div> <p>Die obere Reihe einzelner Spalten wird nun ordentlich als Raster ausgelegt.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wir haben jeder Spalte auch eine hellrote Farbe gegeben, damit Sie genau sehen können, wie viel Platz jede einnimmt.</p> </div> <p>Layout-Container, die mehr als eine Spalte umfassen sollen, müssen spezielle Klassen erhalten, um ihre <a href="/de/docs/Web/CSS/width"><code>width</code></a>-Werte an die erforderliche Anzahl von Spalten (plus die dazwischenliegenden Abstände) anzupassen. Wir müssen eine zusätzliche Klasse erstellen, um Container zu ermöglichen, 2 bis 12 Spalten zu umfassen. Jede Breite ergibt sich aus der Summe der Spaltenbreite dieser Anzahl von Spalten plus der Randbreiten, die immer um eins weniger sind als die Anzahl der Spalten.</p> <p>Fügen Sie folgendes am unteren Rand Ihres CSS hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* Two column widths (120px) plus one gutter width (20px) */ .col.span2 { width: 140px; } /* Three column widths (180px) plus two gutter widths (40px) */ .col.span3 { width: 220px; } /* And so on… */ .col.span4 { width: 300px; } .col.span5 { width: 380px; } .col.span6 { width: 460px; } .col.span7 { width: 540px; } .col.span8 { width: 620px; } .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } .col.span12 { width: 940px; } </code></pre></div> <p>Mit diesen erstellten Klassen können wir nun unterschiedlich breite Spalten auf dem Raster anordnen. Versuchen Sie, die Seite zu speichern und im Browser zu laden, um die Effekte zu sehen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie Schwierigkeiten haben, das obige Beispiel zum Laufen zu bringen, vergleichen Sie es mit unserer <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">fertigen Version</a> auf GitHub (siehe sie auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">live</a>).</p> </div> <p>Versuchen Sie, die Klassen an Ihren Elementen zu ändern oder sogar einige Container hinzuzufügen und zu entfernen, um zu sehen, wie Sie das Layout variieren können. Zum Beispiel könnten Sie die zweite Reihe so aussehen lassen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div> </code></pre></div> <p>Jetzt, da Sie ein Rastersystem in Betrieb haben, können Sie die Reihen und die Anzahl der Spalten in jeder Reihe definieren und dann jeden Container mit dem gewünschten Inhalt füllen. Großartig!</p></div></section><section aria-labelledby="ein_flexibles_raster_erstellen"><h3 id="ein_flexibles_raster_erstellen"><a href="#ein_flexibles_raster_erstellen">Ein flexibles Raster erstellen</a></h3><div class="section-content"><p>Unser Raster funktioniert gut, aber es hat eine feste Breite. Wir möchten wirklich ein flexibles (flüssiges) Raster, das mit dem verfügbaren Platz im Browser- <a href="/de/docs/Glossary/Viewport">Viewport</a> wächst und schrumpft. Um das zu erreichen, können wir die Referenz-Pixelbreiten in Prozentzahlen umwandeln.</p> <p>Die Gleichung, die eine feste Breite in eine flexible, prozentbasierte umwandelt, lautet wie folgt.</p> <pre class="brush: plain notranslate">target / context = result </pre> <p>Für unsere Spaltenbreite ist unsere <strong>Zielbreite</strong> 60 Pixel und unser <strong>Kontext</strong> ist der 960-Pixel-Wrapper. Wir können das Folgende verwenden, um einen Prozentsatz zu berechnen.</p> <pre class="brush: plain notranslate">60 / 960 = 0.0625 </pre> <p>Dann verschieben wir das Dezimal um 2 Stellen und erhalten einen Prozentsatz von 6,25%. So können wir in unserem CSS die 60-Pixel-Spaltenbreite durch 6,25% ersetzen.</p> <p>Wir müssen dasselbe mit unserer Randbreite tun:</p> <pre class="brush: plain notranslate">20 / 960 = 0.02083333333 </pre> <p>Also müssen wir den 20-Pixel-<a href="/de/docs/Web/CSS/margin-left"><code>margin-left</code></a> in unserer <code>.col</code>-Regel und die 20-Pixel-<a href="/de/docs/Web/CSS/padding-right"><code>padding-right</code></a> in <code>.wrapper</code> durch 2.08333333% ersetzen.</p> <h4 id="aktualisieren_unseres_rasters">Aktualisieren unseres Rasters</h4> <p>Um in diesem Abschnitt zu beginnen, erstellen Sie eine neue Kopie Ihrer vorherigen Beispielseite oder erstellen Sie eine lokale Kopie unseres <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">simple-grid-finished.html</a> Codes, um ihn als Ausgangspunkt zu verwenden.</p> <p>Aktualisieren Sie die zweite CSS-Regel (mit dem <code>.wrapper</code>-Selektor) wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } </code></pre></div> <p>Wir haben nicht nur eine prozentuale <a href="/de/docs/Web/CSS/width"><code>width</code></a> hinzugefügt, sondern auch eine <a href="/de/docs/Web/CSS/max-width"><code>max-width</code></a>-Eigenschaft hinzugefügt, um zu verhindern, dass das Layout zu breit wird.</p> <p>Aktualisieren Sie als nächstes die vierte CSS-Regel (mit dem <code>.col</code>-Selektor) wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255 150 150); } </code></pre></div> <p>Jetzt kommt der etwas arbeitsintensivere Teil — wir müssen alle unsere <code>.col.span</code>-Regeln aktualisieren, um Prozentwerte anstelle von Pixelwerten zu verwenden. Das erfordert ein bisschen Zeit mit einem Taschenrechner; um Ihnen etwas Mühe zu ersparen, haben wir es unten für Sie erledigt.</p> <p>Aktualisieren Sie den unteren Block der CSS-Regeln wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { width: 22.91666666%; } /* And so on… */ .col.span4 { width: 31.24999999%; } .col.span5 { width: 39.58333332%; } .col.span6 { width: 47.91666665%; } .col.span7 { width: 56.24999998%; } .col.span8 { width: 64.58333331%; } .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } .col.span12 { width: 97.91666663%; } </code></pre></div> <p>Jetzt speichern Sie Ihren Code, laden ihn in einem Browser und versuchen, die Viewportbreite zu ändern — Sie sollten sehen, dass sich die Spaltenbreiten schön anpassen, um zu passen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie Schwierigkeiten haben, das obige Beispiel zum Laufen zu bringen, vergleichen Sie es mit unserer <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">fertigen Version auf GitHub</a> (siehe sie auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">live</a>).</p> </div></div></section><section aria-labelledby="einfachere_berechnungen_mit_der_funktion_calc"><h3 id="einfachere_berechnungen_mit_der_funktion_calc"><a href="#einfachere_berechnungen_mit_der_funktion_calc">Einfachere Berechnungen mit der Funktion calc()</a></h3><div class="section-content"><p>Sie könnten die <a href="/de/docs/Web/CSS/calc"><code>calc()</code></a>-Funktion verwenden, um die Berechnungen direkt in Ihrem CSS durchzuführen — dies ermöglicht es Ihnen, einfache mathematische Gleichungen in Ihre CSS-Werte einzufügen, um zu berechnen, welchen Wert ein Element haben sollte. Dies ist besonders nützlich, wenn komplexe Mathematik durchgeführt werden muss, und Sie können sogar eine Berechnung durchführen, die unterschiedliche Einheiten verwendet, z. B. "Ich möchte, dass die Höhe dieses Elements immer 100% der Höhe des Elternelements beträgt, minus 50px". Siehe <a href="/de/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc">dieses Beispiel aus einem MediaStream Recording API-Tutorial</a>.</p> <p>Auf jeden Fall zurück zu unseren Rastern! Jede Spalte, die mehr als eine Spalte unseres Rasters umfasst, hat eine Gesamtbreite von 6,25%, multipliziert mit der Anzahl der Spalten, die umfasst werden, plus 2.08333333%, multipliziert mit der Anzahl der Ränder (die immer die Anzahl der Spalten minus 1 beträgt). Die <code>calc()</code>-Funktion ermöglicht es uns, diese Berechnung direkt im <code>width</code>-Wert durchzuführen, sodass wir für jedes Element, das 4 Spalten umfasst, beispielsweise folgendes tun können:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col.span4 { width: calc((6.25% * 4) + (2.08333333% * 3)); } </code></pre></div> <p>Versuchen Sie, Ihren unteren Regelblock durch das Folgende zu ersetzen und laden Sie ihn dann im Browser, um zu sehen, ob Sie das gleiche Ergebnis erhalten:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col.span2 { width: calc((6.25% * 2) + 2.08333333%); } .col.span3 { width: calc((6.25% * 3) + (2.08333333% * 2)); } .col.span4 { width: calc((6.25% * 4) + (2.08333333% * 3)); } .col.span5 { width: calc((6.25% * 5) + (2.08333333% * 4)); } .col.span6 { width: calc((6.25% * 6) + (2.08333333% * 5)); } .col.span7 { width: calc((6.25% * 7) + (2.08333333% * 6)); } .col.span8 { width: calc((6.25% * 8) + (2.08333333% * 7)); } .col.span9 { width: calc((6.25% * 9) + (2.08333333% * 8)); } .col.span10 { width: calc((6.25% * 10) + (2.08333333% * 9)); } .col.span11 { width: calc((6.25% * 11) + (2.08333333% * 10)); } .col.span12 { width: calc((6.25% * 12) + (2.08333333% * 11)); } </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können unsere fertige Version in <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html" class="external" target="_blank">fluid-grid-calc.html</a> sehen (sehen Sie es auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html" class="external" target="_blank">live</a>).</p> </div></div></section><section aria-labelledby="semantische_versus_unsemantische_rastersysteme"><h3 id="semantische_versus_unsemantische_rastersysteme"><a href="#semantische_versus_unsemantische_rastersysteme">Semantische versus "unsemantische" Rastersysteme</a></h3><div class="section-content"><p>Das Hinzufügen von Klassen zu Ihrem Markup, um Layout zu definieren, bedeutet, dass Ihr Inhalt und Ihr Markup an Ihre visuelle Darstellung gebunden werden. Sie werden manchmal hören, dass diese Verwendung von CSS-Klassen als "unsemantisch" beschrieben wird — sie beschreibt, wie der Inhalt aussieht — im Gegensatz zu einer semantischen Verwendung von Klassen, die den Inhalt beschreibt. Dies ist der Fall bei unseren <code>span2</code>, <code>span3</code> usw. Klassen.</p> <p>Dies sind nicht die einzigen Ansätze. Sie könnten stattdessen Ihr Raster festlegen und dann die Größeninformationen den Regeln für bestehende semantische Klassen hinzufügen. Zum Beispiel, wenn Sie einen <a href="/de/docs/Web/HTML/Element/div"><code><div></code></a> mit einer Klasse <code>content</code> darauf hätten, den Sie über 8 Spalten spannen möchten, könnten Sie die Breite aus der <code>span8</code>-Klasse übernehmen und Ihnen eine Regel wie die folgende geben:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.content { width: calc((6.25% * 8) + (2.08333333% * 7)); } </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie einen Präprozessor wie <a href="https://sass-lang.com/" class="external" target="_blank">Sass</a> verwenden würden, könnten Sie einen einfachen Mixin erstellen, um diesen Wert für Sie einzufügen.</p> </div></div></section><section aria-labelledby="verschobene_container_im_raster_aktivieren"><h3 id="verschobene_container_im_raster_aktivieren"><a href="#verschobene_container_im_raster_aktivieren">Verschobene Container im Raster aktivieren</a></h3><div class="section-content"><p>Das von uns erstellte Raster funktioniert gut, solange wir alle Container mit der linken Seite des Rasters bündig beginnen möchten. Wenn wir einen leeren Spaltenbereich vor dem ersten Container — oder zwischen Containern — lassen wollten, müssten wir eine Versatzklasse erstellen, um einen linken Rand zu unserem Standort hinzuzufügen, um ihn optisch über das Raster zu verschieben. Mehr Mathematik!</p> <p>Lassen Sie uns das ausprobieren.</p> <p>Beginnen Sie mit Ihrem vorherigen Code oder verwenden Sie unsere <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">fluid-grid.html</a> Datei als Ausgangspunkt.</p> <p>Lassen Sie uns eine Klasse in unserem CSS erstellen, die ein Container-Element um eine Spaltenbreite verschiebt. Fügen Sie folgendes am Ende Ihres CSS hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.offset-by-one { margin-left: calc(6.25% + (2.08333333% * 2)); } </code></pre></div> <p>Oder falls Sie die Prozentsätze lieber selbst berechnen möchten, verwenden Sie diese hier:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.offset-by-one { margin-left: 10.41666666%; } </code></pre></div> <p>Sie können diese Klasse jetzt jedem Container hinzufügen, wenn Sie links von ihm einen leeren Spaltenbereich vorbereiten möchten. Zum Beispiel, wenn Sie dies in Ihrem HTML haben:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="col span6">14</div> </code></pre></div> <p>Versuchen Sie, es zu ersetzen durch</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="col span5 offset-by-one">14</div> </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Beachten Sie, dass Sie die Anzahl der umspannten Spalten reduzieren müssen, um Platz für den Versatz zu schaffen!</p> </div> <p>Versuchen Sie, es zu laden und zu aktualisieren, um den Unterschied zu sehen, oder sehen Sie sich unser Beispiel <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html" class="external" target="_blank">fluid-grid-offset.html</a> an (sehen Sie es auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html" class="external" target="_blank">live</a>). Das fertige Beispiel sollte so aussehen:</p> <p><img src="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/offset-grid-finished.png" alt="Das Raster hat 2 Reihen. In der ersten Reihe befinden sich 12 gleich breite Rasterelemente und in der zweiten Reihe 4 Rasterelemente unterschiedlicher Breite. Element 13 umfasst 1 Spalte, Element 14 umfasst fünf Spalten, 15 umfasst drei und 16 umfasst zwei. Element 14 hat die Klasse 'offset-by-one' angewendet, was bedeutet, dass es in der 3. Spalte beginnt, anstatt in der zweiten, und einen einspaltigen Leerraum in der zweiten Zeilen zweiter Spalte lässt." width="944" height="47" loading="lazy"></p> <div class="notecard note"> <p><strong>Hinweis:</strong> Als zusätzliche Übung: Können Sie eine <code>offset-by-two</code> Klasse implementieren?</p> </div></div></section><section aria-labelledby="einschränkungen_von_gefloateten_rastern"><h3 id="einschränkungen_von_gefloateten_rastern"><a href="#einschränkungen_von_gefloateten_rastern">Einschränkungen von gefloateten Rastern</a></h3><div class="section-content"><p>Wenn Sie ein solches System verwenden, müssen Sie darauf achten, dass sich die Gesamtsummen der Breiten korrekt addieren und Sie keine Elemente in eine Zeile einfügen, die mehr Spalten umfassen, als die Zeile enthalten kann. Aufgrund der Funktionsweise von <code>floats</code> wird, wenn die Anzahl der Rasterspalten zu breit für das Raster wird, die Elemente am Ende auf die nächste Zeile fallen und das Raster zerstören.</p> <p>Beachten Sie auch, dass, wenn der Inhalt der Elemente breiter wird als die Reihen, die sie belegen, er überlaufen wird und chaotisch aussieht.</p> <p>Die größte Einschränkung dieses Systems besteht darin, dass essenziell eindimensional ist. Wir beschäftigen uns mit Spalten und dem Spannen von Elementen über Spalten, aber nicht mit Reihen. Es ist mit diesen älteren Layoutmethoden sehr schwierig, die Höhe von Elementen zu kontrollieren, ohne explizit eine Höhe festzulegen, und dies ist auch ein sehr unflexibler Ansatz — er funktioniert nur, wenn Sie sicherstellen können, dass Ihr Inhalt eine bestimmte Höhe hat.</p></div></section><section aria-labelledby="flexbox-raster"><h2 id="flexbox-raster"><a href="#flexbox-raster">Flexbox-Raster?</a></h2><div class="section-content"><p>Wenn Sie unseren vorherigen Artikel über <a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">flexbox</a> gelesen haben, denken Sie vielleicht, dass <code>flexbox</code> die ideale Lösung für die Erstellung eines Rasters ist. Es gibt viele auf <code>flexbox</code> basierende Rastersysteme und <code>flexbox</code> kann viele der Probleme lösen, die wir bereits entdeckt haben, als wir unser oben erstelltes Raster erstellt haben.</p> <p>Jedoch war <code>flexbox</code> nie als Raster-System gedacht und stellt eine neue Reihe von Herausforderungen dar, wenn es als solches verwendet wird. Als einfaches Beispiel können wir das gleiche Beispiel-Markup verwenden, das wir oben verwendet haben, und mit dem folgenden CSS-Styling für die <code>wrapper</code>, <code>row</code>, und <code>col</code> Klassen:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } .row { display: flex; } .col { margin-left: 2.08333333%; margin-bottom: 1em; width: 6.25%; flex: 1 1 auto; background: rgb(255 150 150); } </code></pre></div> <p>Sie können diese Ersetzungen in Ihrem eigenen Beispiel machen oder unseren <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/flexbox-grid.html" class="external" target="_blank">flexbox-grid.html</a> Beispielcode anschauen (sehen Sie es auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html" class="external" target="_blank">live</a> ebenfalls).</p> <p>Hier verwandeln wir jede Zeile in einen Flex-Container. Mit einem auf <code>flexbox</code> basierenden Raster brauchen wir immer noch Reihen, um es uns zu ermöglichen, Elemente zu haben, die zusammen weniger als 100% ausmachen. Wir setzen diesen Container auf <code>display: flex</code>.</p> <p>Auf <code>.col</code> setzen wir den ersten Wert der <a href="/de/docs/Web/CSS/flex"><code>flex</code></a>-Eigenschaft (<a href="/de/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>) auf 1, damit unsere Elemente wachsen können, den zweiten Wert (<a href="/de/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>) auf 1, damit die Elemente schrumpfen können, und den dritten Wert (<a href="/de/docs/Web/CSS/flex-basis"><code>flex-basis</code></a>) auf <code>auto</code>. Da unser Element eine <a href="/de/docs/Web/CSS/width"><code>width</code></a> gesetzt hat, wird <code>auto</code> diese Breite als <code>flex-basis</code>-Wert verwenden.</p> <p>Auf der oberen Zeile erhalten wir zwölf ordentliche Boxen auf dem Raster und sie wachsen und schrumpfen gleichmäßig, während wir die Viewport-Breite ändern. In der nächsten Zeile jedoch haben wir nur vier Elemente und diese wachsen und schrumpfen auch ausgehend von der 60-Pixel-Basisbreite. Mit nur vier von ihnen können sie viel mehr wachsen als die Elemente in der darüberliegenden Zeile, was dazu führt, dass sie alle die gleiche Breite in der zweiten Zeile einnehmen.</p> <p><img src="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/flexbox-grid-incomplete.png" alt="Das Raster hat zwei Zeilen. Jede Zeile ist ein Flex-Container. Die erste Reihe hat zwölf gleich breite Flex-Elemente. Die zweite Reihe hat vier gleich breite Flex-Elemente." width="944" height="71" loading="lazy"></p> <p>Um dies zu beheben, müssen wir immer noch unsere <code>span</code>-Klassen einfügen, um eine Breite bereitzustellen, die den Wert zum <code>flex-basis</code> für dieses Element ersetzen wird.</p> <p>Sie respektieren auch nicht das Raster, das von den darüber liegenden Elementen verwendet wird, da sie nichts darüber wissen.</p> <p><code>Flexbox</code> ist <strong>eindimensional</strong> von Design her. Es befasst sich mit einer einzigen Dimension, nämlich einer Reihe oder einer Spalte. Wir können kein striktes Raster für Spalten und Reihen erstellen, was bedeutet, dass wir, wenn wir <code>flexbox</code> für unser Raster verwenden, immer noch Prozentsätze wie beim gefloateten Layout berechnen müssen.</p> <p>In Ihrem Projekt könnten Sie dennoch ein <code>flexbox</code>-„Raster“ verwenden, aufgrund der zusätzlichen Ausrichtungs- und Verteilungsfähigkeiten, die <code>flexbox</code> gegenüber <code>floats</code> bietet. Sie sollten sich jedoch bewusst sein, dass Sie dennoch ein Werkzeug für etwas anderes verwenden, als es gedacht war. Deshalb haben Sie vielleicht das Gefühl, dass es Ihnen zusätzliche Hürden auferlegt, um das gewünschte Endergebnis zu erzielen.</p></div></section><section aria-labelledby="dritthersteller-rastersysteme"><h2 id="dritthersteller-rastersysteme"><a href="#dritthersteller-rastersysteme">Dritthersteller-Rastersysteme</a></h2><div class="section-content"><p>Da wir nun den mathematischen Hintergrund unserer Rasterberechnungen verstehen, sind wir gut vorbereitet, um uns einige der Dritthersteller-Rastersysteme anzusehen, die häufig verwendet werden. Wenn Sie auf dem Web nach "CSS-Raster-Framework" suchen, werden Sie eine große Liste von Optionen finden, aus denen Sie wählen können. Beliebte Frameworks wie <a href="https://getbootstrap.com/" class="external" target="_blank">Bootstrap</a> und <a href="https://get.foundation/" class="external" target="_blank">Foundation</a> enthalten ein Raster-System. Es gibt auch eigenständige Raster-Systeme, die entweder in CSS oder unter Verwendung von Präprozessoren entwickelt wurden.</p> <p>Schauen wir uns eines dieser eigenständigen Systeme an, da es gängige Techniken für die Arbeit mit einem Raster-Framework demonstriert. Das Raster, das wir verwenden werden, ist Teil von Skeleton, einem einfachen CSS-Framework.</p> <p>Um loszulegen, besuchen Sie die <a href="http://getskeleton.com/" class="external" target="_blank">Skeleton-Website</a>, und wählen Sie "Download", um die ZIP-Datei herunterzuladen. Entpacken Sie diese und kopieren Sie die <code>skeleton.css</code> und <code>normalize.css</code>-Dateien in ein neues Verzeichnis.</p> <p>Machen Sie eine Kopie unserer <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton.html" class="external" target="_blank">html-skeleton.html</a> Datei und speichern Sie es im selben Verzeichnis wie die Skeleton- und Normalize-CSS.</p> <p>Binden Sie Skeleton und Normalize CSS in die HTML-Seite ein, indem Sie folgendes in den Kopfbereich hinzufügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><link href="normalize.css" rel="stylesheet" /> <link href="skeleton.css" rel="stylesheet" /> </code></pre></div> <p>Skeleton enthält mehr als ein Rastersystem — es enthält auch CSS für Typografie und andere Seitenelemente, die Sie als Ausgangspunkt verwenden können. Wir lassen diese zunächst auf den Standardwerten, jedoch — es ist das Raster, das uns hier wirklich interessiert.</p> <blockquote> <p><strong>Note:</strong> <a href="https://necolas.github.io/normalize.css/" class="external" target="_blank">Normalize</a> ist eine wirklich nützliche kleine CSS-Bibliothek, geschrieben von Nicolas Gallagher, die automatisch einige nützliche grundlegende Layout-Korrekturen vornimmt und standardmäßige Elementstyling konsistenter über Browser hinweg macht.</p> </blockquote> <p>Wir werden ein ähnliches HTML wie in unserem früheren Beispiel verwenden. Fügen Sie das folgende Ihrem HTML-Body hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col">13</div> <div class="col">14</div> <div class="col">15</div> <div class="col">16</div> </div> </div> </code></pre></div> <p>Um Skeleton nutzen zu können, müssen wir dem Wrapper-<a href="/de/docs/Web/HTML/Element/div"><code><div></code></a> eine Klasse <code>container</code> geben — dies ist bereits in unserem HTML enthalten. Dies zentriert den Inhalt mit einer maximalen Breite von 960 Pixeln. Sie können sehen, wie die Boxen jetzt nie breiter als 960 Pixel werden.</p> <p>Sie können in der <code>skeleton.css</code> Datei sehen, welches CSS verwendet wird, wenn wir diese Klasse anwenden. Das <code><div></code> wird mit <code>auto</code> linken und rechten Rändern zentriert und eine Polsterung von 20 Pixeln wird links und rechts angewendet. Skeleton setzt auch die <a href="/de/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>-Eigenschaft auf <code>border-box</code>, wie wir es früher getan haben, sodass die Polsterung und Rahmen dieses Elements in die Gesamtbreite einbezogen werden.</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } </code></pre></div> <p>Elemente können nur Teil des Rasters werden, wenn sie sich innerhalb einer Zeile befinden, sodass wir wie in unserem früheren Beispiel ein weiteres <code><div></code> oder ein anderes Element mit der Klasse <code>row</code> zwischen den Inhalts-<code><div></code>-Elementen und dem <code>container</code>-<code><div></code> verschachteln müssen. Das haben wir auch schon gemacht.</p> <p>Legen wir nun die Container-Boxen fest. Skeleton basiert auf einem Raster mit 12 Spalten. Die Boxen in der obersten Zeile benötigen alle Klassen <code>one column</code>, um eine Spalte zu umfassen.</p> <p>Fügen Sie diese jetzt hinzu, wie in folgendem Snippet gezeigt:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="container"> <div class="row"> <div class="one column">1</div> <div class="one column">2</div> <div class="one column">3</div> /* and so on */ </div> </div> </code></pre></div> <p>Geben Sie als nächstes den Containern in der zweiten Zeile Klassen, die die Anzahl der Spalten angeben, die sie umfassen sollen, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> <div class="two columns">16</div> </div> </code></pre></div> <p>Versuchen Sie, Ihre HTML-Datei zu speichern und im Browser zu laden, um die Wirkung zu sehen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie Schwierigkeiten haben, dieses Beispiel zum Laufen zu bringen, versuchen Sie, das Fenster zu verbreitern, das Sie zum Anzeigen verwenden (das Raster wird nicht wie hier beschrieben angezeigt, wenn das Fenster zu schmal ist). Wenn das nicht funktioniert, vergleichen Sie es mit unserer <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html" class="external" target="_blank">html-skeleton-finished.html</a>-Datei (sehen Sie es auch <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html" class="external" target="_blank">live</a> ebenfalls).</p> </div> <p>Wenn Sie in der <code>skeleton.css</code>-Datei nachsehen, können Sie sehen, wie dies funktioniert. Skeleton hat zum Beispiel das Folgende definiert, um Elemente mit "drei Spalten" -Klassen zu stylen.</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.three.columns { width: 22%; } </code></pre></div> <p>Alles was Skeleton (oder ein anderes Raster-Framework) macht, ist das Einrichten von vordefinierten Klassen, die Sie verwenden können, indem Sie sie Ihrem Markup hinzufügen. Es ist genau so, wie wenn Sie die Arbeit des Berechnens dieser Prozentsätze selber machen würden.</p> <p>Wie Sie sehen können, müssen wir beim Verwenden von Skeleton sehr wenig CSS schreiben. Es übernimmt das ganze Floating für uns, wenn wir Klassen in unser Markup einfügen. Diese Fähigkeit, die Verantwortung für das Layout an etwas anderes zu übergeben, machte die Verwendung eines Frameworks für ein Rastersystem zu einer überzeugenden Wahl! Diese Tage aber, mit CSS-Grid-Layout, bewegen viele Entwickler sich davon weg, diese Frameworks zu verwenden, um das eingebaute native Raster, das CSS bietet, zu nutzen.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Sie verstehen jetzt, wie verschiedene Rastersysteme erstellt werden, was nützlich sein wird, um mit älteren Sites zu arbeiten und den Unterschied zwischen dem nativen Raster von CSS-Grid-Layout und diesen älteren Systemen zu verstehen.</p></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/css_layout/legacy_layout_methods/index.md?plain=1" title="Folder: de/learn_web_development/core/css_layout/legacy_layout_methods (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fcore%2Fcss_layout%2Flegacy_layout_methods%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fcore%2Fcss_layout%2Flegacy_layout_methods%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p>Rastersysteme sind ein sehr gebräuchliches Merkmal in CSS-Layouts und wurden vor dem CSS-Grid-Layout meist mit <code>floats</code> oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine festgelegte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalts-Spalten in diese imaginären Spalten. In diesem Artikel werden wir diese älteren Methoden untersuchen, um zu verstehen, wie sie verwendet wurden, falls Sie an einem älteren Projekt arbeiten.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Grundlagen von HTML (lernen Sie die\n <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Einführung in HTML</a>), und eine Vorstellung davon, wie CSS funktioniert (lernen Sie die\n <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen der CSS-Gestaltung</a>.)\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>\n Die grundlegenden Konzepte hinter den Rastersystemen zu verstehen, die verwendet wurden, bevor CSS-Grid-Layout in Browsern verfügbar war.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"layout-_und_rastersysteme_vor_dem_css-grid-layout","title":"Layout- und Rastersysteme vor dem CSS-Grid-Layout","isH3":false,"content":"<p>Es mag für jemanden mit Design-Hintergrund überraschend erscheinen, dass CSS bis vor kurzem kein eingebautes Rastersystem hatte und stattdessen verschiedene suboptimale Methoden verwendet wurden, um rasterähnliche Designs zu erstellen. Wir sprechen jetzt von diesen Methoden als vom \"veralteten\" Methoden.</p>\n<p>Bei neuen Projekten wird in den meisten Fällen CSS-Grid-Layout in Kombination mit einer oder mehreren anderen modernen Layoutmethoden verwendet, um die Grundlage für ein Layout zu bilden. Sie werden jedoch von Zeit zu Zeit auf \"Rastersysteme\" stoßen, die diese veralteten Methoden verwenden. Es ist sinnvoll, zu verstehen, wie sie funktionieren und warum sie sich von CSS-Grid-Layout unterscheiden.</p>\n<p>Diese Lektion erklärt, wie Rastersysteme und Raster-Frameworks basierend auf <code>floats</code> und <code>flexbox</code> funktionieren. Nachdem Sie das Grid-Layout studiert haben, werden Sie wahrscheinlich überrascht sein, wie kompliziert das alles erscheint! Dieses Wissen wird Ihnen hilfreich sein, wenn Sie Fallback-Code für Browser erstellen müssen, die neuere Methoden nicht unterstützen, und ermöglicht es Ihnen, an bestehenden Projekten zu arbeiten, die diese Art von Systemen verwenden.</p>\n<p>Es ist wichtig, sich bei der Erkundung dieser Systeme vor Augen zu halten, dass keines von ihnen tatsächlich ein Gitter auf die Weise erstellt, wie CSS-Grid-Layout ein Gitter erstellt. Sie funktionieren, indem sie Elementen eine Größe geben und diese so verschieben, dass sie sich in einer Weise ausrichten, die wie ein Gitter aussieht.</p>"}},{"type":"prose","value":{"id":"ein_layout_mit_zwei_spalten","title":"Ein Layout mit zwei Spalten","isH3":false,"content":"<p>Beginnen wir mit dem einfachsten möglichen Beispiel — einem Layout mit zwei Spalten. Sie können mitmachen, indem Sie eine neue <code>index.html</code>-Datei auf Ihrem Computer erstellen, sie mit einer <a href=\"https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html\" class=\"external\" target=\"_blank\">einfachen HTML-Vorlage</a> füllen und den unten stehenden Code an den entsprechenden Stellen einfügen. Am Ende des Abschnitts können Sie ein Live-Beispiel sehen, wie der endgültige Code aussehen sollte.</p>\n<p>Zuerst brauchen wir etwas Inhalt, den wir in unsere Spalten setzen können. Ersetzen Sie alles, was sich derzeit im Body befindet, durch Folgendes:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h1>2 column layout example</h1>\n<div>\n <h2>First column</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus\n aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,\n pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at\n ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer\n ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur\n vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.\n Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus\n sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.\n Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,\n eget fermentum sapien.\n </p>\n</div>\n\n<div>\n <h2>Second column</h2>\n <p>\n Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada\n ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed\n est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus\n tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies\n lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis\n vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n </p>\n</div>\n</code></pre></div>\n<p>Jede der Spalten benötigt ein äußeres Element, um ihren Inhalt zu enthalten und es uns zu ermöglichen, alles auf einmal zu manipulieren. In diesem Beispiel haben wir uns für <a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a>-Elemente entschieden, aber Sie könnten etwas semantisch Passenderes wie <a href=\"/de/docs/Web/HTML/Element/article\"><code><article></code></a>s, <a href=\"/de/docs/Web/HTML/Element/section\"><code><section></code></a>s, und <a href=\"/de/docs/Web/HTML/Element/aside\"><code><aside></code></a>s oder was auch immer wählen.</p>\n<p>Nun zum CSS. Zuerst einmal wenden Sie folgendes auf Ihr HTML an, um einige grundlegende Einstellungen zu treffen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 900px;\n margin: 0 auto;\n}\n</code></pre></div>\n<p>Der <code>body</code> wird 90% der Viewport-Breite ausmachen, bis er 900px Breite erreicht, in diesem Fall bleibt er auf dieser Breite fixiert und zentriert sich im Viewport. Standardmäßig werden seine Kinder (die <a href=\"/de/docs/Web/HTML/Element/Heading_Elements\">h1</a> und die beiden <a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a>s) 100% der Breite des Bodys umfassen. Wenn wir möchten, dass die beiden <a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a>s nebeneinander schweben, müssen wir ihre Breiten so einstellen, dass sie insgesamt 100% der Breite ihres Elternelements oder kleiner sind, damit sie nebeneinander passen. Fügen Sie dazu folgendes am Ende Ihres CSS hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div:nth-of-type(1) {\n width: 48%;\n}\n\ndiv:nth-of-type(2) {\n width: 48%;\n}\n</code></pre></div>\n<p>Hier haben wir beide auf 48% der Breite ihres Elternelements gesetzt — das ergibt insgesamt 96% und lässt uns 4% als Abstand zwischen den beiden Spalten frei, damit der Inhalt etwas Platz zum Atmen hat. Jetzt müssen wir nur noch die Spalten schweben lassen, und zwar so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div:nth-of-type(1) {\n width: 48%;\n float: left;\n}\n\ndiv:nth-of-type(2) {\n width: 48%;\n float: right;\n}\n</code></pre></div>\n<p>Wenn wir alles zusammenfügen, sollte das Ergebnis so aussehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A two column layout sample\" id=\"frame_a_two_column_layout\" width=\"100%\" height=\"520\" src=\"about:blank\" data-live-path=\"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/\" data-live-id=\"a_two_column_layout\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Sie werden hier feststellen, dass wir überall Prozentangaben für die Breiten verwenden — dies ist eine ziemlich gute Strategie, da es ein <strong>Liquid Layout</strong> schafft, das sich an verschiedene Bildschirmgrößen anpasst und dieselben Proportionen für die Spaltenbreiten bei kleineren Bildschirmgrößen beibehält. Versuchen Sie, die Breite Ihres Browserfensters anzupassen, um es selbst zu sehen. Dies ist ein wertvolles Werkzeug für responsives Webdesign.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können dieses Beispiel unter <a href=\"https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html\" class=\"external\" target=\"_blank\">0_two-column-layout.html</a> ausführen (siehe auch <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html\" class=\"external\" target=\"_blank\">den Quellcode</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"einfache_veraltete_raster-frameworks_erstellen","title":"Einfache, veraltete Raster-Frameworks erstellen","isH3":false,"content":"<p>Die Mehrheit der veralteten Frameworks verwendet das Verhalten der <a href=\"/de/docs/Web/CSS/float\"><code>float</code></a>-Eigenschaft, um eine Spalte neben einer anderen schweben zu lassen und auf diese Weise etwas zu schaffen, das wie ein Raster aussieht. Den Prozess des Erstellens eines Rasters mit <code>floats</code> durchzugehen, zeigt Ihnen, wie das funktioniert und führt auch einige komplexere Konzepte ein, die auf dem aufbauen, was Sie in der Lektion über <a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats und Aufräumen</a> gelernt haben.</p>\n<p>Der einfachste Raster-Framework-Typ, den man erstellen kann, ist einer mit fester Breite — wir müssen lediglich herausfinden, wie breit unser Design insgesamt sein soll, wie viele Spalten wir wollen und wie breit die Abstände und Spalten sein sollten. Wenn wir stattdessen beschließen, unser Design auf einem Raster anzuordnen, bei dem die Spalten je nach Browserbreite wachsen und schrumpfen, müssten wir prozentuale Breiten für die Spalten und die Abstände zwischen ihnen berechnen.</p>\n<p>In den nächsten Abschnitten werden wir uns ansehen, wie man beides erstellt. Wir werden ein 12-Spalten-Gitter erstellen — eine sehr häufige Wahl, die als sehr anpassungsfähig für verschiedene Situationen angesehen wird, da 12 gut durch 6, 4, 3 und 2 teilbar ist.</p>"}},{"type":"prose","value":{"id":"ein_einfaches_raster_mit_fester_breite","title":"Ein einfaches Raster mit fester Breite","isH3":true,"content":"<p>Lassen Sie uns zuerst ein Rastersystem erstellen, das feste Breiten für die Spalten verwendet.</p>\n<p>Beginnen Sie damit, eine lokale Kopie unserer Beispiel- <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html\" class=\"external\" target=\"_blank\">simple-grid.html</a>-Datei zu erstellen, die das folgende Markup in ihrem Body enthält.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"row\">\n <div class=\"col\">1</div>\n <div class=\"col\">2</div>\n <div class=\"col\">3</div>\n <div class=\"col\">4</div>\n <div class=\"col\">5</div>\n <div class=\"col\">6</div>\n <div class=\"col\">7</div>\n <div class=\"col\">8</div>\n <div class=\"col\">9</div>\n <div class=\"col\">10</div>\n <div class=\"col\">11</div>\n <div class=\"col\">12</div>\n </div>\n <div class=\"row\">\n <div class=\"col span1\">13</div>\n <div class=\"col span6\">14</div>\n <div class=\"col span3\">15</div>\n <div class=\"col span2\">16</div>\n </div>\n</div>\n</code></pre></div>\n<p>Das Ziel ist es, dies in ein Demonstrationsraster mit zwei Zeilen auf einem zwölfspaltigen Raster zu verwandeln — die obere Zeile demonstriert die Größe der einzelnen Spalten, die zweite Zeile einige unterschiedlich große Bereiche auf dem Raster.</p>\n<p><img src=\"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/simple-grid-finished.png\" alt=\"CSS-Raster mit 16 Rasterelementen, verteilt auf zwölf Spalten und zwei Reihen. Die obere Reihe hat 12 gleichbreite Rasterelemente in 12 Spalten. Die zweite Reihe hat Rasterelemente unterschiedlicher Größe. Element 13 umfasst 1 Spalte, Element 14 umfasst sechs Spalten, 15 umfasst drei und 16 umfasst zwei.\" width=\"952\" height=\"50\" loading=\"lazy\"></p>\n<p>Im <a href=\"/de/docs/Web/HTML/Element/style\"><code><style></code></a>-Element, fügen Sie den folgenden Code hinzu, der dem Wrapper-Container eine Breite von 980 Pixeln gibt, mit einem Polster auf der rechten Seite von 20 Pixeln. Dadurch bleiben uns 960 Pixel für unsere gesamten Spalten-/Abstandsbreiten — in diesem Fall wird das Polster von der gesamten Inhaltsbreite abgezogen, weil wir <a href=\"/de/docs/Web/CSS/box-sizing\"><code>box-sizing</code></a> auf <code>border-box</code> für alle Elemente auf der Seite gesetzt haben (siehe <a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model#the_alternative_css_box_model\">Das alternative CSS-Boxmodell</a> für eine ausführlichere Erklärung).</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>* {\n box-sizing: border-box;\n}\n\nbody {\n width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 20px;\n}\n</code></pre></div>\n<p>Jetzt verwenden Sie den Zeilen-Container, der um jede Zeile des Rasters gewickelt ist, um den Abstand von einer Zeile zur nächsten zu klären. Fügen Sie die folgende Regel unter Ihrer vorherigen hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.row {\n clear: both;\n}\n</code></pre></div>\n<p>Das Anwenden dieser Klärung bedeutet, dass wir nicht jede Zeile vollständig mit Elementen füllen müssen, um die vollen zwölf Spalten zu machen. Die Zeilen bleiben getrennt und beeinträchtigen sich nicht gegenseitig.</p>\n<p>Die Abstände zwischen den Spalten sind 20 Pixel breit. Wir erstellen diese Abstände als einen linken Rand auf jeder Spalte — einschließlich der ersten Spalte, um die 20 Pixel Polster auf der rechten Seite des Containers auszugleichen. Insgesamt haben wir also 12 Abstände — 12 x 20 = 240.</p>\n<p>Wir müssen das von unserer Gesamtbreite von 960 Pixel abziehen, was uns 720 Pixel für unsere Spalten gibt. Wenn wir das jetzt durch 12 teilen, wissen wir, dass jede Spalte 60 Pixel breit sein sollte.</p>\n<p>Unser nächster Schritt ist, eine Regel für die Klasse <code>.col</code> zu erstellen, die sie nach links floatet, ihr einen <a href=\"/de/docs/Web/CSS/margin-left\"><code>margin-left</code></a> von 20 Pixeln gibt, um den Rand zu bilden, und eine <a href=\"/de/docs/Web/CSS/width\"><code>width</code></a> von 60 Pixeln hat. Fügen Sie die folgende Regel am Ende Ihres CSS hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col {\n float: left;\n margin-left: 20px;\n width: 60px;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>Die obere Reihe einzelner Spalten wird nun ordentlich als Raster ausgelegt.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWir haben jeder Spalte auch eine hellrote Farbe gegeben, damit Sie genau sehen können, wie viel Platz jede einnimmt.</p>\n</div>\n<p>Layout-Container, die mehr als eine Spalte umfassen sollen, müssen spezielle Klassen erhalten, um ihre <a href=\"/de/docs/Web/CSS/width\"><code>width</code></a>-Werte an die erforderliche Anzahl von Spalten (plus die dazwischenliegenden Abstände) anzupassen. Wir müssen eine zusätzliche Klasse erstellen, um Container zu ermöglichen, 2 bis 12 Spalten zu umfassen. Jede Breite ergibt sich aus der Summe der Spaltenbreite dieser Anzahl von Spalten plus der Randbreiten, die immer um eins weniger sind als die Anzahl der Spalten.</p>\n<p>Fügen Sie folgendes am unteren Rand Ihres CSS hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* Two column widths (120px) plus one gutter width (20px) */\n.col.span2 {\n width: 140px;\n}\n/* Three column widths (180px) plus two gutter widths (40px) */\n.col.span3 {\n width: 220px;\n}\n/* And so on… */\n.col.span4 {\n width: 300px;\n}\n.col.span5 {\n width: 380px;\n}\n.col.span6 {\n width: 460px;\n}\n.col.span7 {\n width: 540px;\n}\n.col.span8 {\n width: 620px;\n}\n.col.span9 {\n width: 700px;\n}\n.col.span10 {\n width: 780px;\n}\n.col.span11 {\n width: 860px;\n}\n.col.span12 {\n width: 940px;\n}\n</code></pre></div>\n<p>Mit diesen erstellten Klassen können wir nun unterschiedlich breite Spalten auf dem Raster anordnen. Versuchen Sie, die Seite zu speichern und im Browser zu laden, um die Effekte zu sehen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie Schwierigkeiten haben, das obige Beispiel zum Laufen zu bringen, vergleichen Sie es mit unserer <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">fertigen Version</a> auf GitHub (siehe sie auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">live</a>).</p>\n</div>\n<p>Versuchen Sie, die Klassen an Ihren Elementen zu ändern oder sogar einige Container hinzuzufügen und zu entfernen, um zu sehen, wie Sie das Layout variieren können. Zum Beispiel könnten Sie die zweite Reihe so aussehen lassen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"row\">\n <div class=\"col span8\">13</div>\n <div class=\"col span4\">14</div>\n</div>\n</code></pre></div>\n<p>Jetzt, da Sie ein Rastersystem in Betrieb haben, können Sie die Reihen und die Anzahl der Spalten in jeder Reihe definieren und dann jeden Container mit dem gewünschten Inhalt füllen. Großartig!</p>"}},{"type":"prose","value":{"id":"ein_flexibles_raster_erstellen","title":"Ein flexibles Raster erstellen","isH3":true,"content":"<p>Unser Raster funktioniert gut, aber es hat eine feste Breite. Wir möchten wirklich ein flexibles (flüssiges) Raster, das mit dem verfügbaren Platz im Browser- <a href=\"/de/docs/Glossary/Viewport\">Viewport</a> wächst und schrumpft. Um das zu erreichen, können wir die Referenz-Pixelbreiten in Prozentzahlen umwandeln.</p>\n<p>Die Gleichung, die eine feste Breite in eine flexible, prozentbasierte umwandelt, lautet wie folgt.</p>\n<pre class=\"brush: plain notranslate\">target / context = result\n</pre>\n<p>Für unsere Spaltenbreite ist unsere <strong>Zielbreite</strong> 60 Pixel und unser <strong>Kontext</strong> ist der 960-Pixel-Wrapper. Wir können das Folgende verwenden, um einen Prozentsatz zu berechnen.</p>\n<pre class=\"brush: plain notranslate\">60 / 960 = 0.0625\n</pre>\n<p>Dann verschieben wir das Dezimal um 2 Stellen und erhalten einen Prozentsatz von 6,25%. So können wir in unserem CSS die 60-Pixel-Spaltenbreite durch 6,25% ersetzen.</p>\n<p>Wir müssen dasselbe mit unserer Randbreite tun:</p>\n<pre class=\"brush: plain notranslate\">20 / 960 = 0.02083333333\n</pre>\n<p>Also müssen wir den 20-Pixel-<a href=\"/de/docs/Web/CSS/margin-left\"><code>margin-left</code></a> in unserer <code>.col</code>-Regel und die 20-Pixel-<a href=\"/de/docs/Web/CSS/padding-right\"><code>padding-right</code></a> in <code>.wrapper</code> durch 2.08333333% ersetzen.</p>\n<h4 id=\"aktualisieren_unseres_rasters\">Aktualisieren unseres Rasters</h4>\n<p>Um in diesem Abschnitt zu beginnen, erstellen Sie eine neue Kopie Ihrer vorherigen Beispielseite oder erstellen Sie eine lokale Kopie unseres <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">simple-grid-finished.html</a> Codes, um ihn als Ausgangspunkt zu verwenden.</p>\n<p>Aktualisieren Sie die zweite CSS-Regel (mit dem <code>.wrapper</code>-Selektor) wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 2.08333333%;\n}\n</code></pre></div>\n<p>Wir haben nicht nur eine prozentuale <a href=\"/de/docs/Web/CSS/width\"><code>width</code></a> hinzugefügt, sondern auch eine <a href=\"/de/docs/Web/CSS/max-width\"><code>max-width</code></a>-Eigenschaft hinzugefügt, um zu verhindern, dass das Layout zu breit wird.</p>\n<p>Aktualisieren Sie als nächstes die vierte CSS-Regel (mit dem <code>.col</code>-Selektor) wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col {\n float: left;\n margin-left: 2.08333333%;\n width: 6.25%;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>Jetzt kommt der etwas arbeitsintensivere Teil — wir müssen alle unsere <code>.col.span</code>-Regeln aktualisieren, um Prozentwerte anstelle von Pixelwerten zu verwenden. Das erfordert ein bisschen Zeit mit einem Taschenrechner; um Ihnen etwas Mühe zu ersparen, haben wir es unten für Sie erledigt.</p>\n<p>Aktualisieren Sie den unteren Block der CSS-Regeln wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* Two column widths (12.5%) plus one gutter width (2.08333333%) */\n.col.span2 {\n width: 14.58333333%;\n}\n/* Three column widths (18.75%) plus two gutter widths (4.1666666) */\n.col.span3 {\n width: 22.91666666%;\n}\n/* And so on… */\n.col.span4 {\n width: 31.24999999%;\n}\n.col.span5 {\n width: 39.58333332%;\n}\n.col.span6 {\n width: 47.91666665%;\n}\n.col.span7 {\n width: 56.24999998%;\n}\n.col.span8 {\n width: 64.58333331%;\n}\n.col.span9 {\n width: 72.91666664%;\n}\n.col.span10 {\n width: 81.24999997%;\n}\n.col.span11 {\n width: 89.5833333%;\n}\n.col.span12 {\n width: 97.91666663%;\n}\n</code></pre></div>\n<p>Jetzt speichern Sie Ihren Code, laden ihn in einem Browser und versuchen, die Viewportbreite zu ändern — Sie sollten sehen, dass sich die Spaltenbreiten schön anpassen, um zu passen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie Schwierigkeiten haben, das obige Beispiel zum Laufen zu bringen, vergleichen Sie es mit unserer <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">fertigen Version auf GitHub</a> (siehe sie auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">live</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"einfachere_berechnungen_mit_der_funktion_calc","title":"Einfachere Berechnungen mit der Funktion calc()","isH3":true,"content":"<p>Sie könnten die <a href=\"/de/docs/Web/CSS/calc\"><code>calc()</code></a>-Funktion verwenden, um die Berechnungen direkt in Ihrem CSS durchzuführen — dies ermöglicht es Ihnen, einfache mathematische Gleichungen in Ihre CSS-Werte einzufügen, um zu berechnen, welchen Wert ein Element haben sollte. Dies ist besonders nützlich, wenn komplexe Mathematik durchgeführt werden muss, und Sie können sogar eine Berechnung durchführen, die unterschiedliche Einheiten verwendet, z. B. \"Ich möchte, dass die Höhe dieses Elements immer 100% der Höhe des Elternelements beträgt, minus 50px\". Siehe <a href=\"/de/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc\">dieses Beispiel aus einem MediaStream Recording API-Tutorial</a>.</p>\n<p>Auf jeden Fall zurück zu unseren Rastern! Jede Spalte, die mehr als eine Spalte unseres Rasters umfasst, hat eine Gesamtbreite von 6,25%, multipliziert mit der Anzahl der Spalten, die umfasst werden, plus 2.08333333%, multipliziert mit der Anzahl der Ränder (die immer die Anzahl der Spalten minus 1 beträgt). Die <code>calc()</code>-Funktion ermöglicht es uns, diese Berechnung direkt im <code>width</code>-Wert durchzuführen, sodass wir für jedes Element, das 4 Spalten umfasst, beispielsweise folgendes tun können:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col.span4 {\n width: calc((6.25% * 4) + (2.08333333% * 3));\n}\n</code></pre></div>\n<p>Versuchen Sie, Ihren unteren Regelblock durch das Folgende zu ersetzen und laden Sie ihn dann im Browser, um zu sehen, ob Sie das gleiche Ergebnis erhalten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col.span2 {\n width: calc((6.25% * 2) + 2.08333333%);\n}\n.col.span3 {\n width: calc((6.25% * 3) + (2.08333333% * 2));\n}\n.col.span4 {\n width: calc((6.25% * 4) + (2.08333333% * 3));\n}\n.col.span5 {\n width: calc((6.25% * 5) + (2.08333333% * 4));\n}\n.col.span6 {\n width: calc((6.25% * 6) + (2.08333333% * 5));\n}\n.col.span7 {\n width: calc((6.25% * 7) + (2.08333333% * 6));\n}\n.col.span8 {\n width: calc((6.25% * 8) + (2.08333333% * 7));\n}\n.col.span9 {\n width: calc((6.25% * 9) + (2.08333333% * 8));\n}\n.col.span10 {\n width: calc((6.25% * 10) + (2.08333333% * 9));\n}\n.col.span11 {\n width: calc((6.25% * 11) + (2.08333333% * 10));\n}\n.col.span12 {\n width: calc((6.25% * 12) + (2.08333333% * 11));\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können unsere fertige Version in <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html\" class=\"external\" target=\"_blank\">fluid-grid-calc.html</a> sehen (sehen Sie es auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html\" class=\"external\" target=\"_blank\">live</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"semantische_versus_unsemantische_rastersysteme","title":"Semantische versus \"unsemantische\" Rastersysteme","isH3":true,"content":"<p>Das Hinzufügen von Klassen zu Ihrem Markup, um Layout zu definieren, bedeutet, dass Ihr Inhalt und Ihr Markup an Ihre visuelle Darstellung gebunden werden. Sie werden manchmal hören, dass diese Verwendung von CSS-Klassen als \"unsemantisch\" beschrieben wird — sie beschreibt, wie der Inhalt aussieht — im Gegensatz zu einer semantischen Verwendung von Klassen, die den Inhalt beschreibt. Dies ist der Fall bei unseren <code>span2</code>, <code>span3</code> usw. Klassen.</p>\n<p>Dies sind nicht die einzigen Ansätze. Sie könnten stattdessen Ihr Raster festlegen und dann die Größeninformationen den Regeln für bestehende semantische Klassen hinzufügen. Zum Beispiel, wenn Sie einen <a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a> mit einer Klasse <code>content</code> darauf hätten, den Sie über 8 Spalten spannen möchten, könnten Sie die Breite aus der <code>span8</code>-Klasse übernehmen und Ihnen eine Regel wie die folgende geben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.content {\n width: calc((6.25% * 8) + (2.08333333% * 7));\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie einen Präprozessor wie <a href=\"https://sass-lang.com/\" class=\"external\" target=\"_blank\">Sass</a> verwenden würden, könnten Sie einen einfachen Mixin erstellen, um diesen Wert für Sie einzufügen.</p>\n</div>"}},{"type":"prose","value":{"id":"verschobene_container_im_raster_aktivieren","title":"Verschobene Container im Raster aktivieren","isH3":true,"content":"<p>Das von uns erstellte Raster funktioniert gut, solange wir alle Container mit der linken Seite des Rasters bündig beginnen möchten. Wenn wir einen leeren Spaltenbereich vor dem ersten Container — oder zwischen Containern — lassen wollten, müssten wir eine Versatzklasse erstellen, um einen linken Rand zu unserem Standort hinzuzufügen, um ihn optisch über das Raster zu verschieben. Mehr Mathematik!</p>\n<p>Lassen Sie uns das ausprobieren.</p>\n<p>Beginnen Sie mit Ihrem vorherigen Code oder verwenden Sie unsere <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">fluid-grid.html</a> Datei als Ausgangspunkt.</p>\n<p>Lassen Sie uns eine Klasse in unserem CSS erstellen, die ein Container-Element um eine Spaltenbreite verschiebt. Fügen Sie folgendes am Ende Ihres CSS hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.offset-by-one {\n margin-left: calc(6.25% + (2.08333333% * 2));\n}\n</code></pre></div>\n<p>Oder falls Sie die Prozentsätze lieber selbst berechnen möchten, verwenden Sie diese hier:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.offset-by-one {\n margin-left: 10.41666666%;\n}\n</code></pre></div>\n<p>Sie können diese Klasse jetzt jedem Container hinzufügen, wenn Sie links von ihm einen leeren Spaltenbereich vorbereiten möchten. Zum Beispiel, wenn Sie dies in Ihrem HTML haben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"col span6\">14</div>\n</code></pre></div>\n<p>Versuchen Sie, es zu ersetzen durch</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"col span5 offset-by-one\">14</div>\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nBeachten Sie, dass Sie die Anzahl der umspannten Spalten reduzieren müssen, um Platz für den Versatz zu schaffen!</p>\n</div>\n<p>Versuchen Sie, es zu laden und zu aktualisieren, um den Unterschied zu sehen, oder sehen Sie sich unser Beispiel <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html\" class=\"external\" target=\"_blank\">fluid-grid-offset.html</a> an (sehen Sie es auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html\" class=\"external\" target=\"_blank\">live</a>). Das fertige Beispiel sollte so aussehen:</p>\n<p><img src=\"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/offset-grid-finished.png\" alt=\"Das Raster hat 2 Reihen. In der ersten Reihe befinden sich 12 gleich breite Rasterelemente und in der zweiten Reihe 4 Rasterelemente unterschiedlicher Breite. Element 13 umfasst 1 Spalte, Element 14 umfasst fünf Spalten, 15 umfasst drei und 16 umfasst zwei. Element 14 hat die Klasse 'offset-by-one' angewendet, was bedeutet, dass es in der 3. Spalte beginnt, anstatt in der zweiten, und einen einspaltigen Leerraum in der zweiten Zeilen zweiter Spalte lässt.\" width=\"944\" height=\"47\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nAls zusätzliche Übung: Können Sie eine <code>offset-by-two</code> Klasse implementieren?</p>\n</div>"}},{"type":"prose","value":{"id":"einschränkungen_von_gefloateten_rastern","title":"Einschränkungen von gefloateten Rastern","isH3":true,"content":"<p>Wenn Sie ein solches System verwenden, müssen Sie darauf achten, dass sich die Gesamtsummen der Breiten korrekt addieren und Sie keine Elemente in eine Zeile einfügen, die mehr Spalten umfassen, als die Zeile enthalten kann. Aufgrund der Funktionsweise von <code>floats</code> wird, wenn die Anzahl der Rasterspalten zu breit für das Raster wird, die Elemente am Ende auf die nächste Zeile fallen und das Raster zerstören.</p>\n<p>Beachten Sie auch, dass, wenn der Inhalt der Elemente breiter wird als die Reihen, die sie belegen, er überlaufen wird und chaotisch aussieht.</p>\n<p>Die größte Einschränkung dieses Systems besteht darin, dass essenziell eindimensional ist. Wir beschäftigen uns mit Spalten und dem Spannen von Elementen über Spalten, aber nicht mit Reihen. Es ist mit diesen älteren Layoutmethoden sehr schwierig, die Höhe von Elementen zu kontrollieren, ohne explizit eine Höhe festzulegen, und dies ist auch ein sehr unflexibler Ansatz — er funktioniert nur, wenn Sie sicherstellen können, dass Ihr Inhalt eine bestimmte Höhe hat.</p>"}},{"type":"prose","value":{"id":"flexbox-raster","title":"Flexbox-Raster?","isH3":false,"content":"<p>Wenn Sie unseren vorherigen Artikel über <a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">flexbox</a> gelesen haben, denken Sie vielleicht, dass <code>flexbox</code> die ideale Lösung für die Erstellung eines Rasters ist. Es gibt viele auf <code>flexbox</code> basierende Rastersysteme und <code>flexbox</code> kann viele der Probleme lösen, die wir bereits entdeckt haben, als wir unser oben erstelltes Raster erstellt haben.</p>\n<p>Jedoch war <code>flexbox</code> nie als Raster-System gedacht und stellt eine neue Reihe von Herausforderungen dar, wenn es als solches verwendet wird. Als einfaches Beispiel können wir das gleiche Beispiel-Markup verwenden, das wir oben verwendet haben, und mit dem folgenden CSS-Styling für die <code>wrapper</code>, <code>row</code>, und <code>col</code> Klassen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 2.08333333%;\n}\n\n.row {\n display: flex;\n}\n\n.col {\n margin-left: 2.08333333%;\n margin-bottom: 1em;\n width: 6.25%;\n flex: 1 1 auto;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>Sie können diese Ersetzungen in Ihrem eigenen Beispiel machen oder unseren <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/flexbox-grid.html\" class=\"external\" target=\"_blank\">flexbox-grid.html</a> Beispielcode anschauen (sehen Sie es auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html\" class=\"external\" target=\"_blank\">live</a> ebenfalls).</p>\n<p>Hier verwandeln wir jede Zeile in einen Flex-Container. Mit einem auf <code>flexbox</code> basierenden Raster brauchen wir immer noch Reihen, um es uns zu ermöglichen, Elemente zu haben, die zusammen weniger als 100% ausmachen. Wir setzen diesen Container auf <code>display: flex</code>.</p>\n<p>Auf <code>.col</code> setzen wir den ersten Wert der <a href=\"/de/docs/Web/CSS/flex\"><code>flex</code></a>-Eigenschaft (<a href=\"/de/docs/Web/CSS/flex-grow\"><code>flex-grow</code></a>) auf 1, damit unsere Elemente wachsen können, den zweiten Wert (<a href=\"/de/docs/Web/CSS/flex-shrink\"><code>flex-shrink</code></a>) auf 1, damit die Elemente schrumpfen können, und den dritten Wert (<a href=\"/de/docs/Web/CSS/flex-basis\"><code>flex-basis</code></a>) auf <code>auto</code>. Da unser Element eine <a href=\"/de/docs/Web/CSS/width\"><code>width</code></a> gesetzt hat, wird <code>auto</code> diese Breite als <code>flex-basis</code>-Wert verwenden.</p>\n<p>Auf der oberen Zeile erhalten wir zwölf ordentliche Boxen auf dem Raster und sie wachsen und schrumpfen gleichmäßig, während wir die Viewport-Breite ändern. In der nächsten Zeile jedoch haben wir nur vier Elemente und diese wachsen und schrumpfen auch ausgehend von der 60-Pixel-Basisbreite. Mit nur vier von ihnen können sie viel mehr wachsen als die Elemente in der darüberliegenden Zeile, was dazu führt, dass sie alle die gleiche Breite in der zweiten Zeile einnehmen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/flexbox-grid-incomplete.png\" alt=\"Das Raster hat zwei Zeilen. Jede Zeile ist ein Flex-Container. Die erste Reihe hat zwölf gleich breite Flex-Elemente. Die zweite Reihe hat vier gleich breite Flex-Elemente.\" width=\"944\" height=\"71\" loading=\"lazy\"></p>\n<p>Um dies zu beheben, müssen wir immer noch unsere <code>span</code>-Klassen einfügen, um eine Breite bereitzustellen, die den Wert zum <code>flex-basis</code> für dieses Element ersetzen wird.</p>\n<p>Sie respektieren auch nicht das Raster, das von den darüber liegenden Elementen verwendet wird, da sie nichts darüber wissen.</p>\n<p><code>Flexbox</code> ist <strong>eindimensional</strong> von Design her. Es befasst sich mit einer einzigen Dimension, nämlich einer Reihe oder einer Spalte. Wir können kein striktes Raster für Spalten und Reihen erstellen, was bedeutet, dass wir, wenn wir <code>flexbox</code> für unser Raster verwenden, immer noch Prozentsätze wie beim gefloateten Layout berechnen müssen.</p>\n<p>In Ihrem Projekt könnten Sie dennoch ein <code>flexbox</code>-„Raster“ verwenden, aufgrund der zusätzlichen Ausrichtungs- und Verteilungsfähigkeiten, die <code>flexbox</code> gegenüber <code>floats</code> bietet. Sie sollten sich jedoch bewusst sein, dass Sie dennoch ein Werkzeug für etwas anderes verwenden, als es gedacht war. Deshalb haben Sie vielleicht das Gefühl, dass es Ihnen zusätzliche Hürden auferlegt, um das gewünschte Endergebnis zu erzielen.</p>"}},{"type":"prose","value":{"id":"dritthersteller-rastersysteme","title":"Dritthersteller-Rastersysteme","isH3":false,"content":"<p>Da wir nun den mathematischen Hintergrund unserer Rasterberechnungen verstehen, sind wir gut vorbereitet, um uns einige der Dritthersteller-Rastersysteme anzusehen, die häufig verwendet werden. Wenn Sie auf dem Web nach \"CSS-Raster-Framework\" suchen, werden Sie eine große Liste von Optionen finden, aus denen Sie wählen können. Beliebte Frameworks wie <a href=\"https://getbootstrap.com/\" class=\"external\" target=\"_blank\">Bootstrap</a> und <a href=\"https://get.foundation/\" class=\"external\" target=\"_blank\">Foundation</a> enthalten ein Raster-System. Es gibt auch eigenständige Raster-Systeme, die entweder in CSS oder unter Verwendung von Präprozessoren entwickelt wurden.</p>\n<p>Schauen wir uns eines dieser eigenständigen Systeme an, da es gängige Techniken für die Arbeit mit einem Raster-Framework demonstriert. Das Raster, das wir verwenden werden, ist Teil von Skeleton, einem einfachen CSS-Framework.</p>\n<p>Um loszulegen, besuchen Sie die <a href=\"http://getskeleton.com/\" class=\"external\" target=\"_blank\">Skeleton-Website</a>, und wählen Sie \"Download\", um die ZIP-Datei herunterzuladen. Entpacken Sie diese und kopieren Sie die <code>skeleton.css</code> und <code>normalize.css</code>-Dateien in ein neues Verzeichnis.</p>\n<p>Machen Sie eine Kopie unserer <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton.html\" class=\"external\" target=\"_blank\">html-skeleton.html</a> Datei und speichern Sie es im selben Verzeichnis wie die Skeleton- und Normalize-CSS.</p>\n<p>Binden Sie Skeleton und Normalize CSS in die HTML-Seite ein, indem Sie folgendes in den Kopfbereich hinzufügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><link href=\"normalize.css\" rel=\"stylesheet\" />\n<link href=\"skeleton.css\" rel=\"stylesheet\" />\n</code></pre></div>\n<p>Skeleton enthält mehr als ein Rastersystem — es enthält auch CSS für Typografie und andere Seitenelemente, die Sie als Ausgangspunkt verwenden können. Wir lassen diese zunächst auf den Standardwerten, jedoch — es ist das Raster, das uns hier wirklich interessiert.</p>\n<blockquote>\n<p><strong>Note:</strong> <a href=\"https://necolas.github.io/normalize.css/\" class=\"external\" target=\"_blank\">Normalize</a> ist eine wirklich nützliche kleine CSS-Bibliothek, geschrieben von Nicolas Gallagher, die automatisch einige nützliche grundlegende Layout-Korrekturen vornimmt und standardmäßige Elementstyling konsistenter über Browser hinweg macht.</p>\n</blockquote>\n<p>Wir werden ein ähnliches HTML wie in unserem früheren Beispiel verwenden. Fügen Sie das folgende Ihrem HTML-Body hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"container\">\n <div class=\"row\">\n <div class=\"col\">1</div>\n <div class=\"col\">2</div>\n <div class=\"col\">3</div>\n <div class=\"col\">4</div>\n <div class=\"col\">5</div>\n <div class=\"col\">6</div>\n <div class=\"col\">7</div>\n <div class=\"col\">8</div>\n <div class=\"col\">9</div>\n <div class=\"col\">10</div>\n <div class=\"col\">11</div>\n <div class=\"col\">12</div>\n </div>\n <div class=\"row\">\n <div class=\"col\">13</div>\n <div class=\"col\">14</div>\n <div class=\"col\">15</div>\n <div class=\"col\">16</div>\n </div>\n</div>\n</code></pre></div>\n<p>Um Skeleton nutzen zu können, müssen wir dem Wrapper-<a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a> eine Klasse <code>container</code> geben — dies ist bereits in unserem HTML enthalten. Dies zentriert den Inhalt mit einer maximalen Breite von 960 Pixeln. Sie können sehen, wie die Boxen jetzt nie breiter als 960 Pixel werden.</p>\n<p>Sie können in der <code>skeleton.css</code> Datei sehen, welches CSS verwendet wird, wenn wir diese Klasse anwenden. Das <code><div></code> wird mit <code>auto</code> linken und rechten Rändern zentriert und eine Polsterung von 20 Pixeln wird links und rechts angewendet. Skeleton setzt auch die <a href=\"/de/docs/Web/CSS/box-sizing\"><code>box-sizing</code></a>-Eigenschaft auf <code>border-box</code>, wie wir es früher getan haben, sodass die Polsterung und Rahmen dieses Elements in die Gesamtbreite einbezogen werden.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.container {\n position: relative;\n width: 100%;\n max-width: 960px;\n margin: 0 auto;\n padding: 0 20px;\n box-sizing: border-box;\n}\n</code></pre></div>\n<p>Elemente können nur Teil des Rasters werden, wenn sie sich innerhalb einer Zeile befinden, sodass wir wie in unserem früheren Beispiel ein weiteres <code><div></code> oder ein anderes Element mit der Klasse <code>row</code> zwischen den Inhalts-<code><div></code>-Elementen und dem <code>container</code>-<code><div></code> verschachteln müssen. Das haben wir auch schon gemacht.</p>\n<p>Legen wir nun die Container-Boxen fest. Skeleton basiert auf einem Raster mit 12 Spalten. Die Boxen in der obersten Zeile benötigen alle Klassen <code>one column</code>, um eine Spalte zu umfassen.</p>\n<p>Fügen Sie diese jetzt hinzu, wie in folgendem Snippet gezeigt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"container\">\n <div class=\"row\">\n <div class=\"one column\">1</div>\n <div class=\"one column\">2</div>\n <div class=\"one column\">3</div>\n /* and so on */\n </div>\n</div>\n</code></pre></div>\n<p>Geben Sie als nächstes den Containern in der zweiten Zeile Klassen, die die Anzahl der Spalten angeben, die sie umfassen sollen, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"row\">\n <div class=\"one column\">13</div>\n <div class=\"six columns\">14</div>\n <div class=\"three columns\">15</div>\n <div class=\"two columns\">16</div>\n</div>\n</code></pre></div>\n<p>Versuchen Sie, Ihre HTML-Datei zu speichern und im Browser zu laden, um die Wirkung zu sehen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie Schwierigkeiten haben, dieses Beispiel zum Laufen zu bringen, versuchen Sie, das Fenster zu verbreitern, das Sie zum Anzeigen verwenden (das Raster wird nicht wie hier beschrieben angezeigt, wenn das Fenster zu schmal ist). Wenn das nicht funktioniert, vergleichen Sie es mit unserer <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html\" class=\"external\" target=\"_blank\">html-skeleton-finished.html</a>-Datei (sehen Sie es auch <a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html\" class=\"external\" target=\"_blank\">live</a> ebenfalls).</p>\n</div>\n<p>Wenn Sie in der <code>skeleton.css</code>-Datei nachsehen, können Sie sehen, wie dies funktioniert. Skeleton hat zum Beispiel das Folgende definiert, um Elemente mit \"drei Spalten\" -Klassen zu stylen.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.three.columns {\n width: 22%;\n}\n</code></pre></div>\n<p>Alles was Skeleton (oder ein anderes Raster-Framework) macht, ist das Einrichten von vordefinierten Klassen, die Sie verwenden können, indem Sie sie Ihrem Markup hinzufügen. Es ist genau so, wie wenn Sie die Arbeit des Berechnens dieser Prozentsätze selber machen würden.</p>\n<p>Wie Sie sehen können, müssen wir beim Verwenden von Skeleton sehr wenig CSS schreiben. Es übernimmt das ganze Floating für uns, wenn wir Klassen in unser Markup einfügen. Diese Fähigkeit, die Verantwortung für das Layout an etwas anderes zu übergeben, machte die Verwendung eines Frameworks für ein Rastersystem zu einer überzeugenden Wahl! Diese Tage aber, mit CSS-Grid-Layout, bewegen viele Entwickler sich davon weg, diese Frameworks zu verwenden, um das eingebaute native Raster, das CSS bietet, zu nutzen.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Sie verstehen jetzt, wie verschiedene Rastersysteme erstellt werden, was nützlich sein wird, um mit älteren Sites zu arbeiten und den Unterschied zwischen dem nativen Raster von CSS-Grid-Layout und diesen älteren Systemen zu verstehen.</p>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Legacy layout methods","native":"English (US)"},{"locale":"fr","title":"Méthodes de mises en page traditionnelles","native":"Français"},{"locale":"ja","title":"古いレイアウト方法","native":"日本語"},{"locale":"ko","title":"레거시 레이아웃 메서드","native":"한국어"},{"locale":"zh-CN","title":"传统的布局方法","native":"中文 (简体)"}],"pageTitle":"Veraltete Layoutmethoden - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Core","title":"Kern-Lernmodule"},{"uri":"/de/docs/Learn_web_development/Core/CSS_layout","title":"CSS-Layout"},{"uri":"/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","title":"Veraltete Layoutmethoden"}],"popularity":null,"short_title":"Veraltete Layoutmethoden","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/core/css_layout/legacy_layout_methods","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/css_layout/legacy_layout_methods/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Rastersysteme sind ein sehr gebräuchliches Merkmal in CSS-Layouts und wurden vor dem CSS-Grid-Layout meist mit floats oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine festgelegte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalts-Spalten in diese imaginären Spalten. In diesem Artikel werden wir diese älteren Methoden untersuchen, um zu verstehen, wie sie verwendet wurden, falls Sie an einem älteren Projekt arbeiten.","title":"Veraltete Layoutmethoden","toc":[{"text":"Layout- und Rastersysteme vor dem CSS-Grid-Layout","id":"layout-_und_rastersysteme_vor_dem_css-grid-layout"},{"text":"Ein Layout mit zwei Spalten","id":"ein_layout_mit_zwei_spalten"},{"text":"Einfache, veraltete Raster-Frameworks erstellen","id":"einfache_veraltete_raster-frameworks_erstellen"},{"text":"Flexbox-Raster?","id":"flexbox-raster"},{"text":"Dritthersteller-Rastersysteme","id":"dritthersteller-rastersysteme"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>