{"id":224,"date":"2023-05-16T17:11:25","date_gmt":"2023-05-16T17:11:25","guid":{"rendered":"https:\/\/math-brownies.de\/?p=224"},"modified":"2023-05-16T17:19:31","modified_gmt":"2023-05-16T17:19:31","slug":"grid","status":"publish","type":"post","link":"https:\/\/math-brownies.de\/index.php\/2023\/05\/16\/grid\/","title":{"rendered":"Grid"},"content":{"rendered":"\n\n\n

Ich habe noch gelernt, dass man die float-Eigenschaft benutzen kann, um HTML-Elemente nebeneinander zu bekommen. Float ist aber immer etwas tricky. Es gibt mit Flexbox und Grid bessere, moderene L\u00f6sungen und heute setze ich mich mit Grid auseinander. Dazu nutze ich folgenden Guide<\/a>.<\/p>\n\n\n\n

Ein Grid ist ein Container, in dem man Zeilen und Spalten definiert. Anders als bei einer Tabelle k\u00f6nnen Elemente auf diesem Grid (also zu deutsch Raster) aber freier positioniert werden.<\/p>\n\n\n\n

Man definiert zun\u00e4chst ein Element, also zum Beispiel ein div, dass als CSS-Eigenschaft (\u00fcblicherweise \u00fcber eine Klasse zugewiesen) die Eigenschaft „display:grid“ hat. Au\u00dferdem difiniert man \u00fcber grid-template-columms bzw. grid-template-rows im CSS dieses Elements, wie viele Reihen und Spalten das Raster haben soll. Dabei tr\u00e4gt man die jeweilige Breite bzw. H\u00f6he direkt ein. Ein Div mit einem 4×4-Grid mit gleichm\u00e4\u00dfig breiten und hohen Rasterfl\u00e4chen w\u00fcrde man also so erzeugen:<\/p>\n\n\n\n

<style>\ndiv.container {display:grid;\n                       grid-template-rows: 1fr 1fr 1fr 1fr ;\n                       grid-template-columms: 1fr 1fr 1fr 1fr  ;\n                      }\n<\/style><\/code><\/pre>\n\n\n\n
Das „fr“ steht f\u00fcr „fraction“ und meint, dass eine (gleichm\u00e4\u00dfig gro\u00dfe) Einheit des verf\u00fcgbaren Platzes genutzt wird. Man kann auch feste Pixelgr\u00f6\u00dfen oder den Befehl „auto“ nutzen. Jedes Leerzeichen zwischen den Bezeichnern meint eine Linie des Rasters.<\/p>\n\n\n\n
Ein Item, also ein anderes Element wie ein Bild, eine Textbox usw. wird dann platziert, indem man folgende CSS-Eigenschaften angibt: <\/p>\n\n\n\n
.item-a {\n  grid-column-start: 1;\n  grid-column-end: three;\n  grid-row-start: row2-start;\n  grid-row-end: 3;\n}<\/code><\/pre>\n\n\n\n
Die Zahlen (1, three, 3) referieren hierbei auf die durchnummerierten Rasterlinien (!), nicht auf die Felder dazwischen. Man kann hier auch den Befehl span nutzen, z.B. span 2 spannt \u00fcber zwei Felder auf. Gibt man kein Ende an, nutzt man automatisch span 1. Ganz fancy wird es, wenn man Bereiche benannt hat, aber das ist mir jetzt noch zu komplex.<\/p>\n\n\n\n
Elemente k\u00f6nnen sich \u00fcberlappen, die Anordnung in der H\u00f6he macht man mit z-index. <\/p>\n","protected":false},"excerpt":{"rendered":"
Ich habe noch gelernt, dass man die float-Eigenschaft benutzen kann, um HTML-Elemente nebeneinander zu bekommen. Float ist aber immer etwas tricky. Es gibt mit Flexbox und Grid bessere, moderene L\u00f6sungen und heute setze ich mich mit Grid auseinander. Dazu nutze ich folgenden Guide. Ein Grid ist ein Container, in dem man Zeilen und Spalten definiert. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,3],"tags":[20,59,58],"class_list":["post-224","post","type-post","status-publish","format-standard","hentry","category-css","category-informatik","tag-css","tag-grundgerueste","tag-html"],"_links":{"self":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":4,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/224\/revisions\/229"}],"wp:attachment":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}