Grid Eksplisit
Sistem grid membayangkan penggunaan eksplisit dan implisit. Mari kita teliti konsep ini dengan lebih terperinci.
Grid eksplisit mewakili satu set elemen yang ditempatkan mengikut lajur dan baris. Selalunya grid eksplisit dicipta secara manual dan semua grid yang kami buat bersama anda dalam pelajaran sebelumnya adalah eksplisit (contohnya, pelajaran jubin dalam grid).
Mari buat jadual, yang akan menjadi grid eksplisit kami:
<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;
}
:
