Gridi Zilizo Wazi
Mfumo wa gridi unahusisha matumizi ya gridi zilizo wazi na gridi zisizo wazi. Wacha tuchambue haya dhana kwa undani zaidi.
Gridi iliyo wazi inawakilisha msururu wa vipengee vilivyowekwa kwenye safu wima na safu mlalo. Mara nyingi gridi iliyo wazi huundwa kwa mikono na gridi zote ambazo tumeunda pamoja katika masomo yaliyopita ni za wazi (kwa mfano, somo la vigeu kwenye gridi).
Wacha tuunde jedwali, ambalo litakuwa gridi yetu iliyo wazi:
<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;
}
:
