Was sind Grids ?

03/28/2013 22:42 BananA<3#1
Hey Community,

habe eine kleine frage.
Undzwar lese ich bei Front-end Frameworks like Bootstrap etc. immer wieder etwas von sogenannten "Grids" leider habe ich keine Ahnung was das beudeuten soll. Kann mir jemand das mal genauer erklären ? :)

Lg BananA<3 ;)
03/29/2013 00:09 Hiris#2
Vielleicht meinst du ein Grid-System? Ala eine verschachtelung der Content page um sich den Platz zurechtlegen zu können?
03/29/2013 00:30 BananA<3#3
Quote:
Vielleicht meinst du ein Grid-System?
Ja genau das meine ich, nur verstehe ich den sinn davon leider nicht ganz.
Wie funktioniert das den genau ?
Könntest du mir das vielleicht genauer erklären :) ?

Lg BananA<3 ;)
03/29/2013 03:30 MrPuschel#4
Grids wurden um die Jahrtausendwende herum populär. Ein Grid war damals nichts anderes als eine halbtransparente Schablone in einem Grafikbearbeitungsprogramm anhand dessen man sein Layout gemacht hat. Zum Beispiel ein 960 Pixel Layout eingeteilt in 20 Pixel Spalten.

[Only registered and activated users can see links. Click Here To Register...]

In den letzten Jahren haben dann zunehmend CSS Frameworks diesen Platz eingenommen. z.B. YAML. [Only registered and activated users can see links. Click Here To Register...] Die helfen dir bei deinem Layout indem sie dir Klassen vorgeben mit denen du deine Container ausrichten kannst. Das wird dann interessant wenn du dein Layout für verschiedene Monitore, Auflösungen und Endgeräte optimieren willst.
03/29/2013 09:46 Synatex#5
Wobei die Grids mit dem neuen CSS3 Columns auch größtenteils nutzlos werden. Wenn du den Columns dynamische größe und dynamische Abstände zuweißt, besitzt du den gleichen Effekt.

[Only registered and activated users can see links. Click Here To Register...]
03/29/2013 12:14 BananA<3#6
Viel Dank MrPuschel :) sowie Synatex ;)

Jetzt hab ich es zwar begriffen :D nur praktisch weis ich leider nicht wie das funktioniert ?
Wird also ein Elemente z.B ein Div in verschiedene Grids aufgeteilt ?
Ein beispiel wäre am besten :) danke.

Lg BananA<3
03/29/2013 18:21 Synatex#7
Gehen wir davon aus, unser Framework hat ein 12 Grid System. Also es kann insgesamt 2 Spalten besitzen. Ohne Abstände zwischen den Spalten. Somit hätten wir nun die Möglichkeit unsere Website in 12 unterschiedliche "Größen" einzuteilen. Dafür liefern die meisten CSS Frameworks dann Klassen, wie grid1,grid2,grid3,grid4...grid12 (Abhängig von der Größe).

Gehen wir also davon aus, wir haben 12 Grid und wollen 2 Spalten haben, die eine ist 4 Spalten und die andere 8 Spalten breit. Somit haben wir die "12" voll und unsere volle Breite (100% erreicht).

HTML Code:
<section>
  <section class="grid4"></section>
  <section class="grid8"></section>
</section>
section hätte nun eine Breite von 100%. Da 4 von 12 ein drittel sind, hätte grid4 eine Breite von 33% und grid8 dementsprechend das doppelte eine Breite von 66% (+/-1%) womit die vollen 100% skalierbar zur Verfügung stehen und beide Container unabhängig von der Bildschirmgröße trotzdem ihr Verhältniss beibehalten.
03/29/2013 19:03 BananA<3#8
Vielen Dank :)
Habe es geschafft in Bootstrap die Grids einzuteilen. Hatt Bootstrap den auch ein Horizontales Grid system ? Oder muss ich da mit z.B Margin arbeiten ?

Lg Robin
03/29/2013 19:27 Synatex#9
Mir wäre momentan kein Anwendungsfall bekannt für den ein horizontales Grid-System von nöten bzw. hilfreich wäre. Mir ist auch keins bekannt, sorry.
03/30/2013 16:50 BananA<3#10
Mh okey, trotzdem vielen Dank ;)

Lg Robin