Expliciete Grids
Het gridsysteem impliceert het gebruik van expliciete en impliciete grids. Laten we deze concepten in meer detail bekijken.
Expliciet grid vertegenwoordigt een reeks elementen, geplaatst in kolommen en rijen. Vaak wordt een expliciet grid handmatig gecreëerd en alle grids die we in eerdere lessen hebben gemaakt, zijn expliciet (bijvoorbeeld, les Tegelen in grid).
Laten we een tabel maken, die ons expliciete grid zal zijn:
<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;
}
:
