Sifat susun atur panel CSS: grid dan grid-template-lajur

sifat susun atur panel CSS: grid dan grid-template-columns

Dalam reka letak halaman web moden, reka letak panel ialah kaedah reka bentuk biasa untuk susun kandungan web dalam grid. Atribut susun atur grid dalam CSS dan atribut grid-template-columns adalah kunci untuk merealisasikan reka letak panel.

1. Pengenalan kepada atribut susun atur grid

Atribut susun atur grid ialah sifat dalam CSS yang digunakan untuk mencipta reka letak grid. Ia boleh dibina dengan mudah dengan membahagikan elemen HTML kepada grid Struktur susun atur yang kompleks. Menggunakan susun atur grid bukan sahaja boleh mencapai susun atur lajur, tetapi juga mencapai susun atur responsif dan mempunyai penjajaran yang berkuasa dan keupayaan mengubah saiz.

2. Penjelasan terperinci tentang atribut grid-template-columns

Atribut grid-template-columns digunakan untuk mentakrifkan nombor dan lebar lajur grid. Dengan menetapkan nilai grid-template-lajur, anda boleh melaraskan reka letak grid dengan cepat dan fleksibel.

Berikut ialah beberapa kod contoh grid-template-lajur yang biasa digunakan:

1. Reletak lajur genap:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#🎜 #Kod di atas membahagikan elemen .grid-container kepada 3 lajur dan mengagihkan lebar sama rata kepada setiap lajur.

Tetapkan lebar lajur yang ditentukan:

2. .grid-container {
     display: grid;
     grid-template-columns: 200px 1fr 300px;
   }

Kod di atas membahagikan elemen .grid-container kepada 3 lajur dan lebar lajur 1 ialah 200 piksel , nisbah lajur 2 kepada ruang yang tinggal ialah 1, dan lebar lajur 3 ialah 300 piksel.

Gunakan garis grid untuk memisahkan:

3. .grid-container {
     display: grid;
     grid-template-columns: [col1-start] 200px [col2-start] 1fr [col2-end col3-start] 300px [col3-end];
   }

Tanda kurung segi empat sama digunakan dalam kod di atas untuk menentukan nama garis grid, yang boleh digunakan dalam reka letak Gunakan nama ini untuk penjajaran dan kedudukan.

3. Aplikasi atribut susun atur grid dalam reka letak panel

Atribut susun atur grid dan atribut lajur-templat grid ialah alat yang berkuasa untuk melaksanakan reka letak panel. Anda boleh mencapai kesan susun atur grid dengan mudah dengan membahagikan panel kepada lajur dan menetapkan lebar yang berbeza.

Berikut ialah contoh kod susun atur panel khusus:

.panel-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.panel {
  background-color: #f2f2f2;
  padding: 20px;
}

Dalam kod di atas, elemen .panel-container dibahagikan kepada dua lajur dan nisbah lebar setiap satu lajur ialah 1: 2. Pada masa yang sama, dengan menetapkan atribut jurang, selang antara lajur ditakrifkan sebagai 20 piksel.

Kemudian kami menambah dua sub-elemen .panel dalam elemen .panel-container, yang dipaparkan sebagai kandungan panel:

<div class="panel-container">
  <div class="panel">
    内容 1
  </div>
  <div class="panel">
    内容 2
  </div>
</div>

Dengan reka letak sedemikian, kami boleh membuat halaman dengan dua panel dengan cepat, setiap satu dengan nisbah lebar 1:2, dan rupa yang lebih cantik.

Ringkasan:

Atribut susun atur grid CSS dan atribut grid-template-columns menyediakan fungsi berkuasa yang boleh melaksanakan susun atur grid kompleks dengan mudah. Dalam reka letak panel, dengan menetapkan atribut grid-template-columns, kami boleh mengawal bilangan dan lebar lajur panel secara fleksibel untuk mencapai kesan reka letak yang berbeza. Sama ada susun atur lajur, susun atur responsif atau struktur susun atur kompleks lain, atribut susun atur grid boleh mengendalikannya dengan mudah.

Atas ialah kandungan terperinci Sifat susun atur panel CSS: grid dan grid-template-lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!