Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Item Grid

Tutorial HTML: Cara Menggunakan Tataletak Grid untuk Reka Letak Item Grid

Reka Letak Grid ialah sistem grid CSS berkuasa yang boleh melaksanakan susun atur grid kompleks dengan mudah. Dengan membahagikan grid kepada baris dan lajur, kami boleh mengawal kedudukan dan saiz item grid dengan mudah. Tutorial ini akan memperkenalkan cara menggunakan susun atur Grid untuk susun atur item grid, sambil memberikan contoh kod khusus untuk mendalami pemahaman.

1. Tetapan Bekas Grid

Pertama, kita perlu menetapkan bekas yang mengandungi grid sebagai bekas grid. Dalam HTML, ini boleh dicapai dengan menetapkan sifat CSS "display: grid". Sebagai contoh, berikut ialah contoh bekas grid mudah:

<div class="grid-container">
  <!-- 网格项 -->
</div>

Dalam CSS, kita boleh memilih bekas grid melalui pemilih dan menetapkannya sebagai bekas grid dengan menetapkan sifat "paparan" kepada "grid" . Contohnya:

.grid-container {
  display: grid;
}

2. Takrif baris dan lajur grid

Dalam bekas grid, kita boleh menentukan baris dan lajur grid dengan menetapkan sifat "baris-templat-grid" dan "lajur-templat-grid" . Saiz baris dan lajur boleh ditakrifkan menggunakan nilai tertentu (seperti piksel, peratusan, dll.) atau kata kunci (seperti "fr" untuk unit pecahan).

Sebagai contoh, berikut ialah contoh bekas grid dengan dua baris dan tiga lajur:

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

Ini akan mencipta dua baris (dengan ketinggian 100px dan 200px) dan tiga lajur (dengan nisbah lebar 1) dalam grid bekas: 2:1) grid.

3. Penempatan item grid

Dalam bekas grid, kita boleh menggunakan sifat "baris grid" dan "lajur grid" untuk menentukan baris dan lajur permulaan item grid dan menggunakan "baris grid" -span" dan "grid-column-span" untuk menentukan bilangan baris dan lajur yang menjangkau item grid.

Sebagai contoh, berikut ialah contoh meletakkan item grid dalam bekas grid hadapan:

<div class="grid-container">
  <div class="grid-item" style="grid-row: 1 / 2; grid-column: 2 / 3;">
    <!-- 网格项内容 -->
  </div>
</div>

Dalam contoh di atas, kami menetapkan "baris grid" dan "lajur grid" untuk item grid menggunakan "gaya sifat " atribut ", letakkannya dalam baris 1, lajur 2 bekas grid.

4. Gaya dan susun atur item grid

Selain meletakkan item grid, kami juga boleh menetapkan gaya dan susun atur untuk item grid. Item grid boleh digayakan dengan warna, sempadan, dsb. menggunakan sifat CSS biasa.

Selain itu, kita juga boleh menggunakan sifat "grid-column-gap" dan "grid-row-gap" untuk menetapkan jarak baris dan lajur antara item grid dalam bekas grid.

Berikut ialah contoh lengkap yang menunjukkan cara membuat bekas grid dengan tiga baris dan empat lajur, letakkan berbilang item grid dan tetapkan gaya dan susun atur item grid:

<style>
  .grid-container {
    display: grid;
    grid-template-rows: 200px 300px 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }

  .grid-item {
    background-color: #ccc;
    border: 1px solid #000;
    padding: 10px;
  }
</style>

<div class="grid-container">
  <div class="grid-item" style="grid-row: 1 / 2; grid-column: 1 / 3;">
    <!-- 网格项1的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 1 / 3; grid-column: 3 / 5;">
    <!-- 网格项2的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 2 / 4; grid-column: 1 / 2;">
    <!-- 网格项3的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 3 / 4; grid-column: 2 / 4;">
    <!-- 网格项4的内容 -->
  </div>
</div>

Contoh di atas Menunjukkan bekas grid dengan kompleks susun atur grid, dengan empat item grid diletakkan dan digayakan serta dibentangkan untuk setiap item grid.

Ringkasan

Menggunakan susun atur Grid untuk susun atur item grid boleh memudahkan kita mengawal struktur dan rupa grid. Dengan menetapkan baris dan lajur bekas grid, serta kedudukan dan saiz item grid, kami boleh mencapai pelbagai kesan susun atur yang kompleks. Dengan berlatih dan mencuba tetapan dan sifat yang berbeza, kami boleh menguasai kemahiran menggunakan reka letak Grid dengan lebih baik.

Semoga tutorial ini dapat membantu anda mempelajari dan memahami cara menggunakan reka letak Grid untuk reka letak item grid. Melalui latihan dan penyelidikan lanjut, anda akan dapat menggunakan reka letak Grid secara fleksibel untuk mencipta pelbagai reka letak halaman web yang unik dan cantik.

Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Item Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!