Explizite Grids
Das Grid-System impliziert die Verwendung von expliziten und impliziten Rastern. Lassen Sie uns diese Konzepte genauer untersuchen.
Explizites Grid repräsentiert eine Menge von Elementen, die in Spalten und Reihen platziert sind. Oft wird das explizite Raster manuell erstellt, und alle Grids, die wir in den vorherigen Lektionen erstellt haben, sind explizit (zum Beispiel die Lektion Kacheln im Grid).
Lassen Sie uns ein Raster erstellen, das unser explizites Grid sein wird:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
