grid-auto-columns

Properti CSS grid-auto-columns menentukan nama garis dan melacak fungsi ukuran kolom yang dibuat secara implisit pada grid.

<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>10</div>
</div>

#grid {
display: grid;
grid-template-rows: 80px 80px;
grid-template-columns: 300px;
grid-auto-columns: 10%;
grid-auto-flow: column;
grid-gap: 5px;
}

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

Properti grid-auto-columns hanya memengaruhi kolom dengan ukuran yang tidak ditetapkan.

Jika kita memeriksa kode dari contoh diatas:

grid-template-columns: 300px;
grid-auto-columns: 10%;
grid-auto-flow: column;

Kamu bisa melihat bahwa hanya kolom pertama yang secara eksplisit berukuran dengan properti grid-template-column.

Keempat kolom lainnya dibuat secara implisit, dan oleh karena itu mereka berukuran sesuai dengan properti grid-auto-columns.

Hasilnya, kolom pertama adalah 300px dan kolom lainnya 10%;

CSS Syntax

grid-auto-columns: auto | max-content | min-content | length;

JavaScript Syntax

object.style.gridAutoColumns="120px"

Attribute Value