Objects Grid CSS Framework

Objects, Grid, CSS und Framework stehen hier zusammen, weil Layout sonst schnell unübersichtlich wird.

Ein Grid-Object ist ein Muster, das du immer wieder brauchst: zwei Spalten, eine Sidebar, Karten in Reihen, Responsive Umbrüche. Das Object kümmert sich um Struktur, nicht um Inhalte. Du solltest in HTML klar sehen können, was Layout ist und was Inhalt ist. Wenn du das trennst, wirst du später beim Umbau nicht wahnsinnig.

<div class="o-grid">
  <div>Hauptinhalt</div>
  <aside>Sidebar</aside>
</div>

CSS Grid als solide Basis

Mit modernem CSS kannst du ein Grid sehr knapp beschreiben. Die Kunst ist eher, es nicht zu übertreiben. Ein Framework setzt oft ein paar Standard-Varianten, z. B. 2 Spalten ab 900px, davor eine Spalte. Dazu ein Gap, der überall gleich ist. So fühlt sich eine Seite wie aus einem Guss an, auch wenn mehrere Leute daran arbeiten.

.o-grid{ display:grid; gap:16px; }
@media (min-width:900px){
  .o-grid{ grid-template-columns: 2fr 1fr; }
}

Warum Objects nicht Components sind

Ein Grid ist kein „Kasten mit Schatten“, das wäre eher eine Card-Component. Das Grid ist die unsichtbare Bühne. Das klingt philosophisch, ist aber praktisch: Du kannst dieselbe Bühne für eine Tabelle, einen Text oder ein Formular nutzen, ohne neue Klassen zu erfinden. Wenn man das vermischt, bekommt man schnell ein Durcheinander aus Layout und Styling, und dann wird es mühselig, das wieder zu entwirrn, glaub mir.