Grile Explicit
Sistemul de grid implică utilizarea explicit și a grilelor implicite. Să analizăm aceste concepte mai în detaliu.
Gridul explicit reprezintă un set de elemente poziționate pe coloane și rânduri. Adesea, grila explicită este creată manual și toate grilele pe care le-am creat împreună în lecțiile anterioare sunt explicite (de exemplu, lecția Plăci în Grid).
Să creăm un tabel care va fi gridul nostru explicit:
<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;
}
:
