grid-column

Properti CSS grid-column adalah singkatan untuk penempatan item grid berbasis baris di sepanjang garis awal dan akhir kolom.

<div id="grid">
  <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>

#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
}

#grid>div {
background-color: #A5D6A7;
color: white;
font-size: 1.9em;
padding: 10px;
}

#grid>div:nth-child(6) {
grid-column: 1 / 3;
background: #FFE082;
}

Properti grid-column adalah singkatan untuk properti grid-column-start dan grid-column-end.

Ini memungkinkan kamu untuk menentukan baris mana yang memulai item grid, dan berapa banyak trek yang terbentang. Yuk lihat kode yang relevan dari contoh di atas:

#grid>div:nth-child(6) {
grid-column: 1 / 3;
background: #FFE082;
}

Kode ini menghasilkan item grid keenam dipindahkan ke kolom 1 dari baris berikutnya, dan merentangkan dua kolom.

Untuk lebih tepatnya, angka 1 dan 3 sebenarnya merujuk pada garis grid. Jadi item grid dimulai pada garis grid 1 dan berakhir pada garis grid 3.

Garis miring ke depan (/) memisahkan nilai awal kolom-kolom dari nilai akhir kolom-kolom.

CSS Syntax

grid-column: grid-column-start / grid-column-end;

JavaScript Syntax

object.style.gridColumn="2 / span 2"

Attribute Value