Danke für die vielen Antworten. 
Konkret suche ich nach einer Möglichkeit eine Matrix aus Buttons zu erzeugen. Es wäre schön diese einfach anpassen zu können.
Es soll eine Art Lagersystem werden (jeder Button steht für ein Fach).
Wichtig wäre mir, dass auf jedem Gerät die komplette Matrix auf einer Seite zu sehen ist und die Buttons auf jeder Seite die maximale Breite und Höhe haben.
Hallo,
für ich ist das Thema CSS noch recht neu und ich beschäftige mich gerade sehr intensiv damit.
Trotzdem komme ich bei einen Problem gerade nicht weiter:
Es sollen Buttons in einer Art Matrix angezeigt werden.
Die Größe der Buttons sollen sich je nach Fenstergröße ändern und zwischen den Buttons sollte ein minimaler Abstand bestehen.
Das ist zur Zeit mein Ansatz:
<!doctype html>
<html lang="de">
<head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.matrix {
width: 100%;
height: 100%;
}
.columnBtn {
display: inline-block;
float: left;
width: 8%;
margin-left: 2%;
}
.menubuttons {
float: left;
height: 9%;
margin-top: 2%;
border: 1px solid #aaa; /* Rahmen */
border-radius: 5px; /* Abgerundete Ecken */
background: #eee; /* Hintergundfarbe für ältere Browser */
display: block; /* Für horizontale Darstellung: display: inline-block; */
text-align: center; /* Horizontale Text-Ausrichtung */
padding-top: 5px; /* OPTIONAL: Vertikale Text-Ausrichtung */
text-decoration: none; /* Links nicht unterstrichen */
color: #333; /* Textfarbe */
}
.menubuttons:hover {
background: #ccc; /* Alternative Hintergrundfarbe beim Überfahren */
}
</style>
</head>
<body>
<div class="matrix">
<div class="columnBtn">
<button class="menubuttons" href="#Link1">1-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">2-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">3-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">4-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">5-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">6-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">7-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">8-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">9-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">10-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
</div>
</body>
</html>Hat jemand eine Idee?
Vielen Dank