Grid CSS - Penyelaman Dalam

Kuliah 9: Grid CSS - Penyelaman Dalam

Selamat datang ke kuliah kesembilan kursus "Asas kepada Kecemerlangan". Dalam kuliah ini, kami akan meneroka Grid CSS, sistem susun atur berkuasa yang membolehkan anda membuat reka letak web yang kompleks dengan mudah. Walaupun Flexbox bagus untuk reka letak satu dimensi (baris atau lajur), CSS Grid menyediakan sistem reka letak dua dimensi, membolehkan anda mengawal kedua-dua baris dan lajur secara serentak.

Apakah Grid CSS?

Grid CSS ialah sistem reka letak dalam CSS yang membolehkan penciptaan reka letak berasaskan grid yang fleksibel, responsif dan. Ia membolehkan anda menjajarkan elemen ke dalam baris dan lajur, menawarkan lebih kawalan ke atas struktur reka letak berbanding Flexbox.

Istilah Grid

Sebelum menyelami contoh, mari kita kenali beberapa istilah penting:

• Bekas Grid: Elemen induk yang mengandungi grid.
• Item Grid: Elemen kanak-kanak di dalam bekas grid.
• Garis Grid: Garisan pembahagi mendatar dan menegak bagi grid.
• Laluan Grid: Ruang antara dua garisan grid, membentuk baris atau lajur.
• Sel Grid: Unit individu terkecil dalam grid yang dibentuk oleh persilangan baris dan lajur.

1. Struktur Grid Asas

Untuk mula menggunakan Grid, gunakan paparan: grid pada bekas.

• Contoh:

  .grid-container {
    display: grid;
  }

Setelah paparan: grid digunakan, elemen anak bekas menjadi item grid.

2. Menentukan Lajur dan Baris Grid

Anda boleh menentukan bilangan baris dan lajur grid anda menggunakan sifat grid-template-lajur dan grid-template-rows.

• Contoh: Membuat grid dengan 3 lajur dan 2 baris.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

Ini akan membuat grid dengan:

• 3 lajur: Lajur pertama ialah 100px lebar, yang kedua ialah 200px dan yang ketiga ialah 100px.
• 2 baris: Baris pertama ialah 50px tinggi dan yang kedua ialah 150px.

3. Menggunakan Unit Pecahan (fr)

Grid CSS memperkenalkan unit pecahan fr, yang mewakili sebahagian kecil daripada ruang yang tersedia dalam bekas grid. Ini ialah cara yang fleksibel untuk memperuntukkan ruang antara item grid.

• Contoh: Menggunakan fr untuk membahagikan ruang sama rata.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

Dalam contoh ini, tiga lajur akan mempunyai lebar yang sama, setiap satu mengambil satu pecahan daripada ruang yang tersedia.

4. Meletakkan Item Grid

Anda boleh mengawal tempat setiap item grid diletakkan menggunakan sifat lajur grid dan baris grid. Sifat ini membolehkan anda menentukan kedudukan mula dan akhir item.

• Contoh:

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

Dalam kes ini, item grid akan merentangi dua lajur pertama tetapi akan diletakkan di baris pertama.

5. Jurang Grid

Sifat jurang grid menambah ruang antara item grid, secara mendatar dan menegak.

• Contoh: Menambah jurang antara lajur dan baris.

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

Ini mewujudkan jurang 20px yang sama antara semua item grid.

6. Automuat dan Auto Isi

Automuat dan autoisi ialah ciri berkuasa yang membolehkan grid meletakkan sebanyak mungkin lajur secara automatik, berdasarkan saiz bekas.

• Contoh AutoFit:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

Di sini, grid secara automatik akan memuatkan sebanyak mungkin lajur, memastikan setiap lajur berukuran sekurang-kurangnya 100px lebar tetapi boleh berkembang untuk memenuhi ruang yang tersedia.

Contoh Praktikal: Reka Letak Grid Mudah

Mari buat reka letak grid ringkas dengan Grid CSS.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

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

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

Dalam contoh ini:

• Bekas .grid mempunyai tiga lajur yang sama lebar dibuat menggunakan ulang(3, 1fr).
• Jurang grid ditetapkan kepada 10px untuk menambah ruang antara item grid.
• Setiap .grid-item mempunyai padding dan warna latar belakang digunakan untuk keterlihatan yang lebih baik.

7. Grid Bersarang

Anda juga boleh membuat sarang grid, di mana item grid menjadi bekas grid itu sendiri. Ini membolehkan reka letak yang lebih kompleks.

• Contoh:

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

Anda boleh menggunakan konsep ini untuk membuat grid di dalam grid lain untuk kawalan yang lebih terperinci ke atas reka letak anda.

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

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

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

Follow Me on LinkedIn-

Ridoy Hasan

Atas ialah kandungan terperinci Grid CSS - Penyelaman Dalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!