Grid-auto-columns xassəsi

grid-auto-columns xassəsi gizli griddə elementin tutacağı sütunların sayı və enini təyin edir. Gizli grid - artıq təyin edilmiş gridin çərçivəsindən kənara çıxan elementlər üçün avtomatik yaradılan griddir. Xassənin qiymətində sütunların enini istənilən ölçü vahidində təyin edirik. Xassə valideyn elementdə yazılır və övlad elementlərin sütun enlərini müəyyən edir.

Sintaksis

cssselektor {
  grid-auto-columns: sütun eni;
}

Nümunə

Gəlin gizli griddə elementlərimiz üçün sütun enlərini təyin edək:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Həmçinin bax