Was sind Grids ?

[BananA<3]

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

[Hiris]

Vielleicht meinst du ein Grid-System? Ala eine verschachtelung der Content page um sich den Platz zurechtlegen zu können?

[BananA<3]

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

[MrPuschel]

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.



In den letzten Jahren haben dann zunehmend CSS Frameworks diesen Platz eingenommen. z.B. YAML. 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.

[Synatex]

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.

[BananA<3]

Viel Dank MrPuschel sowie Synatex

Jetzt hab ich es zwar begriffen 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

[Synatex]

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).

<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.

[BananA<3]

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

[Synatex]

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.

[BananA<3]

Mh okey, trotzdem vielen Dank

Lg Robin