masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web html tutorial Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Adaptif Grid Grid

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

王林
王林
Oct 27, 2023 pm 06:28 PM
html susun atur grid Grid adaptif

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

Tutorial HTML: Cara menggunakan susun atur Grid untuk susun atur grid penyesuaian grid, contoh kod khusus diperlukan

Pengenalan:
Dengan pembangunan Internet, susun atur halaman web telah menjadi lebih dan lebih penting. Kaedah reka letak halaman web tradisional, seperti menggunakan jadual atau susun atur terapung, selalunya memerlukan banyak kod dan pelarasan untuk mencapai kesan penyesuaian. Reka letak Grid yang diperkenalkan dalam CSS3 menyediakan cara yang lebih ringkas dan fleksibel untuk membina susun atur grid penyesuaian grid. Artikel ini akan memperkenalkan anda kepada konsep asas dan aplikasi praktikal susun atur Grid dan memberikan anda contoh kod khusus.

  1. Pengenalan susun atur grid
    Susun atur grid ialah sistem susun atur grid baharu dalam CSS3, yang boleh membahagikan kandungan halaman web kepada baris dan lajur untuk mencipta reka letak grid. Reka letak grid boleh dilaksanakan melalui dua bahagian: bekas grid dan item grid Bekas grid ialah elemen induk yang mengandungi item grid, dan item grid ialah elemen anak di bawah bekas grid.
  2. Mencipta bekas grid
    Pertama, kita perlu mentakrifkan elemen sebagai bekas grid. Dalam HTML, anda boleh menggunakan elemen <div> untuk bertindak sebagai bekas grid. Seperti yang ditunjukkan di bawah: <code><div>元素来充当网格容器。如下所示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container&quot;&gt; &lt;!-- 网格项 --&gt; &lt;div class=&quot;item1&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;item2&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;item3&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;item4&quot;&gt;4&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><ol start="3"><li>定义网格布局<br>通过为网格容器设置CSS属性<code>display: grid;，我们可以将其定义为网格布局。此外，还可以使用grid-template-columns和grid-template-rows属性来指定网格的列数和行数。例如，下面的代码将网格容器定义为含有3列和2行的网格布局。
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
Salin selepas log masuk
  1. 设置网格项的位置和大小
    通过为网格项设置CSS属性grid-column和grid-row，我们可以指定每个网格项在网格布局中的位置。例如，下面的代码将网格项1位于第一列的第一行，网格项2位于第二列的第一行，网格项3位于第三列的第二行，网格项4位于第一列的第二行。
.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2;
}

.item4 {
  grid-column: 1;
  grid-row: 2;
}
Salin selepas log masuk
  1. 自适应网格布局
    在Grid布局中，网格项的大小和位置是可以自适应调整的。我们可以使用grid-template-areas属性来指定每个网格项在网格布局中的位置，并通过使用.
    2. .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}
    Salin selepas log masuk
      Tentukan reka letak grid
        Dengan menetapkan sifat CSS display: grid;</ code>, kami boleh mentakrifkannya sebagai susun atur grid. Selain itu, anda juga boleh menggunakan sifat <code>grid-template-columns dan grid-template-rows untuk menentukan bilangan lajur dan baris grid. Sebagai contoh, kod berikut mentakrifkan bekas grid sebagai susun atur grid dengan 3 lajur dan 2 baris. 

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

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
        Salin selepas log masuk
          Tetapkan kedudukan dan saiz item grid
        Dengan menetapkan sifat CSS grid-column</code untuk item grid > dan <code>grid-row, kita boleh menentukan kedudukan setiap item grid dalam reka letak grid. Sebagai contoh, kod berikut akan meletakkan item grid 1 dalam baris pertama lajur pertama, item grid 2 dalam baris pertama lajur kedua, item grid 3 dalam baris kedua lajur ketiga dan item grid 4 dalam Baris kedua lajur pertama. 


        <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .item1 {
      grid-column: 1;
      grid-row: 1;
      background-color: red;
    }

    .item2 {
      grid-column: 2;
      grid-row: 1;
      background-color: green;
    }

    .item3 {
      grid-column: 1 / span 2;
      grid-row: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>
        Salin selepas log masuk

          Suai Letak Grid

          Dalam susun atur Grid, saiz dan kedudukan item grid boleh dilaraskan secara adaptif. Kita boleh menggunakan atribut grid-template-areas untuk menentukan kedudukan setiap item grid dalam reka letak grid dan mewakili ruang dengan menggunakan aksara .. Contohnya, kod berikut mentakrifkan bekas grid sebagai susun atur grid dengan dua lajur dan dua baris dan meletakkan setiap item grid dalam kedudukan yang berbeza. 

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

.item1 {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
  background-color: green;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
  background-color: blue;
}
          Salin selepas log masuk

          Reka Letak Grid Responsif

          Reka letak grid juga boleh melaksanakan reka letak grid responsif dengan mudah. Kami boleh menggunakan pertanyaan media CSS untuk melaraskan gaya reka letak grid mengikut saiz skrin dan jenis peranti yang berbeza. Sebagai contoh, kod berikut akan menukar susun atur grid kepada susun atur lajur tunggal apabila tetingkap lebih kecil daripada 600px. #🎜🎜##🎜🎜#rrreee#🎜🎜#Kesimpulan: #🎜🎜#Reka letak grid menyediakan cara ringkas dan fleksibel untuk melaksanakan susun atur grid penyesuaian grid. Dengan menggunakan bekas grid dan item grid, kami boleh membuat reka letak web yang kompleks dengan mudah dan menyesuaikannya kepada saiz skrin dan jenis peranti yang berbeza dengan ciri penyesuaian dan responsif. Saya harap artikel ini dapat membantu anda memahami dan menggunakan reka letak Grid serta menulis reka letak halaman web yang lebih fleksibel dan cantik. #🎜🎜##🎜🎜#Kod rujukan: #🎜🎜#rrreee#🎜🎜#Fail CSS (style.css): #🎜🎜#rrreee#🎜🎜#Di atas adalah tentang cara menggunakan susun atur Grid untuk rangkaian penyesuaian grid Tutorial HTML mengenai susun atur grid, saya harap ia akan membantu anda. Ingat, penggunaan fleksibel reka letak Grid boleh membawa pengalaman pengguna dan estetika yang lebih baik ke halaman web anda. Mula cuba menggunakan susun atur Grid! #🎜🎜#

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

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    Video Face Swap

    Video Face Swap

    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

    Tunjukkan Lagi

    Artikel Panas

    Assassin's Creed Shadows: Penyelesaian Riddle Seashell
    3 minggu yang lalu By DDD
    Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini
    2 minggu yang lalu By DDD
    Di mana untuk mencari kad kunci kawalan kren di atomfall
    3 minggu yang lalu By DDD
    <🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran
    3 minggu yang lalu By DDD
    Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua
    4 minggu yang lalu By DDD
    Tunjukkan Lagi

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Tunjukkan Lagi

    Topik panas

    Di manakah pintu masuk log masuk untuk e-mel gmail?
    7648
    15
    Tutorial CakePHP
    1392
    52
    Apakah format nama akaun stim
    91
    11
    kunci pengaktifan win11 kekal
    73
    19
    Jawapan silang kata NYT mini
    36
    110
    Tunjukkan Lagi
    Related knowledge
    Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

    Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

    Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

    HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

    Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

    Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

    Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

    Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

    Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

    Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

    Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

    Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

    See all articles