Bagaimana untuk menentukan saiz garis grid dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menentukan saiz garis grid dalam css

醉折花枝作酒筹

Lepaskan： 2021-08-13 16:16:35

asal

3420 orang telah melayarinya

Kita telah hampir mempelajari pengetahuan tentang latar belakang css Seterusnya, mari kita lihat pengetahuan tentang sistem grid. Rakan-rakan yang memerlukan boleh merujuknya.

Mari kita lihat sedikit berangan dahulu.

 <style>
      article {
          display: grid;
          width: 300px;
          height: 300px;
          grid-template-rows: repeat(3,1fr);
          grid-template-columns: repeat(3,1fr);
      }
      div{
          background: rgb(208, 159, 255);
          background-clip: content-box;
          border: solid 1px rgb(208, 159, 255);
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <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>
    </article>
  </body>

Salin selepas log masuk

Hasil daripada contoh kecil ini ialah Reka letak yang kelihatan cantik. Jadi apakah sifat yang kita ubah? Dengan memerhati, anda dapat melihat bahawa nilai atribut
dan

telah diubah.

Bagaimana untuk menentukan saiz garis grid dalam css Kemudian mari kita lihat dua sifat ini. grid-template-rowsgrid-template-columns

Atribut grid-template-columns adalah berdasarkan dimensi lajur grid untuk mentakrifkan nama garis grid dan saiz trek grid. Nilai adalah senarai yang dipisahkan ruang, di mana setiap nilai menentukan dimensi lajur yang sepadan.

Format sintaks ialah

Ini ialah pengenalan terperinci kepada nilai atribut ini.

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Salin selepas log masuk

tiada: Kata kunci ini mewakili jaringan yang tidak jelas. Semua baris dan saiznya akan ditentukan secara tersirat oleh atribut grid-auto-rows.

kandungan maksimum: ialah kata kunci yang digunakan untuk menunjukkan bahawa kandungan maksimum item grid menduduki trek grid.
kandungan min: ialah kata kunci yang digunakan untuk menunjukkan bahawa trek grid diduduki oleh kandungan maksimum dan minimum item grid.
auto: Jika trek grid adalah yang terbesar, sifat ini bersamaan dengan ; apabila ia adalah yang terkecil, ia bersamaan dengan .
Selepas melihat atribut grid-template-columns, mari lihat atribut grid-template-rows yang lain.

Mari kita lihat format sintaks atribut ini.

Didapati bahawa nilai atribut ini betul-betul sama dengan nilai atribut sebelumnya, jadi kita tidak perlu mengingati terlalu banyak. Mari kita lihat versi ringkas

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Salin selepas log masuk

Pembelajaran yang disyorkan: Bagaimana untuk menentukan saiz garis grid dalam css tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk menentukan saiz garis grid dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!