Cara menggunakan grid CSS untuk tajuk dan kaki melekit

Grid CSS memudahkan susun atur web dengan ketara. Walaupun terdapat lengkung pembelajaran, sifat intuitifnya menjadikannya menyeronokkan untuk digunakan, terutama untuk menguruskan tajuk dan kaki. Tutorial ini menunjukkan mewujudkan kedua -dua kaki tetap dan melekit menggunakan grid CSS. Rachel Andrew's "The New CSS Layout" sangat disyorkan untuk menyelam yang lebih mendalam ke dalam grid dan Flexbox.

Gambaran Keseluruhan Projek

Kami akan membina susun atur HTML klasik dengan tajuk, kandungan utama, dan footer. Kami akan melaksanakan dua variasi footer: footer tetap yang kekal di bahagian bawah viewport tanpa mengira panjang kandungan, dan footer melekit tradisional yang mematuhi bahagian bawah tetapi ditolak oleh kandungan yang lebih panjang. Kawasan kandungan utama akan disesuaikan, merangkumi lebar pandangan penuh atau berpusat dalam lebar yang ditetapkan.

Footers tetap, sementara kurang biasa daripada kaki melekit, digunakan oleh tapak seperti Charles Schwab. Pelaksanaan mereka sering melibatkan saiz dan padding yang berkod keras. Pendekatan kami mengelakkan batasan ini, memanfaatkan fleksibiliti grid CSS.

Sebelum meneruskan, periksa kaki tetap Charles Schwab. Memeriksa kodnya di DevTools mendedahkan ketinggian dan kedudukan yang berkod keras.

Mari kita mencapai kesan yang sama tanpa kekangan ini.

Gaya awal

Kami akan bermula dengan UI yang minimum, secara beransur -ansur meningkatkannya dengan grid CSS. Codesandbox (dan lelaran berikutnya) menyediakan contoh interaktif.

Pertama, kami memastikan ketinggian penuh Viewport digunakan:

 badan {
  Margin: 0; / * menghalang bar scroll */
}

#app {
  Ketinggian: 100VH;
}

Seterusnya, kami menentukan bahagian tajuk, utama, dan footer dan struktur grid mereka. Struktur awal ini tidak berfungsi seperti yang dimaksudkan; Ia berfungsi sebagai asas:

 badan {
  Margin: 0;
}

#app {
  Ketinggian: 100VH;

  / * Tetapan kontena grid */
  paparan: grid;
  Grid-template-lajur: 1FR;
  grid-template-baris: auto 1FR auto;
  grid-template-kawasan:
    'Header'
    'Utama'
    'Footer';
}

#app> header {
  grid-kawasan: header;
}

#app> utama {
  Grid-Area: Main;
  Padding: 15px 5px 10px 5px;
}

#app> footer {
  grid-kawasan: footer;
}

Ini mewujudkan satu susun atur lajur. 1fr bermaksud "mengambil ruang yang tinggal," yang mengakibatkan lajur lebar penuh. Barisan bersaiz menggunakan auto (untuk header dan footer) dan 1fr (untuk kandungan utama untuk mengisi ruang yang tinggal). Tiada ketinggian keras berkod yang diperlukan.

Integrasi Kandungan

Kod yang disediakan menggunakan React untuk tujuan demonstrasi, tetapi prinsip grid CSS kekal bebas daripada rangka kerja. Komponen header, utama, dan footer menjadikan unsur -unsur HTML masing -masing. Bahagian pengebilan dan tetapan menyediakan kandungan sampel, menunjukkan kesesuaian susun atur.

Susun atur awal menunjukkan seksyen "pengebilan" berfungsi, tetapi "tetapan" menolak skrin dari skrin. Menatal mempengaruhi keseluruhan halaman, menyebabkan tajuk hilang. Mari kita atasi ini.

Header dan Footer Tetap

Ketinggian 100vh dan saiz baris auto / 1fr pada mulanya menyebabkan masalah apabila kandungan melebihi paparan. Menambah overflow: auto ke<main></main> Unsur membolehkan menatal di kawasan kandungan utama, menjaga header dan footer tetap:

 #app> utama {
  Grid-Area: Main;
  Limpahan: Auto;
  Padding: 15px 5px 10px 5px;
}

Demo yang dikemas kini ini menyelesaikan masalah menatal dan penglihatan.

Lebar seksyen utama laras

Untuk memusatkan kandungan utama dalam lebar 600px atau biarkan ia merangkumi paparan penuh, kami sarang grid di dalamnya<main></main> . Ini menggunakan tiga lajur ( 1fr 600px 1fr ), dengan berkesan memusatkan bahagian 600px.

 #app> utama {
  paparan: grid;
  Grid-template-baris: 1FR;
  Grid-template-lajur: 1FR 600px 1FR;
}

Kandungan diposisikan menggunakan koordinat grid. Kelas .full membolehkan kandungan merangkumi keseluruhan lebar:

 #app> seksyen {
  grid-kawasan: 1/2/1/3;
}

#app> seksyen.full {
  Grid-Area: 1/1/1/4;
}

Perhatikan penggunaan garisan grid (empat baris untuk tiga lajur). Mengecilkan Viewport mendedahkan isu pemangkasan dengan lebar 600px tetap. minmax(0, 600px) menyelesaikan ini, membolehkan lebar menyesuaikan sehingga 600px:

 Utama {
  paparan: grid;
  Grid-template-baris: 1FR;
  Grid-template-lajur: 1FR Minmax (0, 600px) 1FR;
}

Demo akhir mempamerkan tingkah laku responsif ini.

Footer melekit tradisional

Untuk membuat footer melekit tradisional, kami mengubah suai struktur grid. The<main></main> Elemen kini mengandungi footer dalam gridnya:

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

Grid #app dikemas kini untuk mempunyai dua baris:

 #app {
  / * sama seperti sebelum */
  Grid-template-lajur: 1FR;
  Grid-template-baris: Auto 1FR;
  grid-template-kawasan:
    'Header'
    'utama';
}

The<main></main> Grid diselaraskan untuk memasukkan footer:

 #app> utama {
  paparan: grid;
  Grid-template-baris: 1FR Auto;
  Grid-template-lajur: 1FR Minmax (0, 600px) 1FR;
}

Posisi Footer dalam grid ini:

 #app> footer {
  grid-kawasan: 2/1/3/4;
}

Persediaan ini membolehkan footer ditolak oleh kandungan dalam<main></main> , mewujudkan kesan footer yang dikehendaki. Pelarasan padding kecil dibuat untuk memastikan penjajaran yang betul. Demo akhir menggambarkan tingkah laku ini. Gaya tambahan telah digunakan untuk elemen seksyen untuk membolehkan menatal mendatar dalam kawasan kandungan sambil mengekalkan susun atur menegak.

Kesimpulan

Walaupun teknik yang ditunjukkan dapat dicapai tanpa grid CSS, grid menyediakan penyelesaian bersatu dan elegan. Fleksibiliti dan kemudahan penggunaannya, seperti yang ditunjukkan oleh peralihan mudah dari yang tetap ke footer melekit, menjadikannya alat yang kuat untuk susun atur yang kompleks. Contoh -contoh yang dibentangkan agak mudah, mempamerkan potensi grid CSS untuk projek yang lebih bercita -cita tinggi.

Atas ialah kandungan terperinci Cara menggunakan grid CSS untuk tajuk dan kaki melekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!