CSS Grid memberi kami sistem susun atur laman web yang kuat. Panduan CSS-Tricks memberikan gambaran menyeluruh mengenai sifat dan contoh susun atur Grid. Kami akan mengambil pendekatan yang bertentangan, menunjukkan kepada anda set atribut grid minimum yang diperlukan untuk memenuhi keperluan susun atur yang paling.

Lima atribut ini akan membantu anda memulakan dengan cepat:

• display (untuk nilai grid)
• grid-template-columns
• grid-gap
• grid-auto-flow
• grid-column / grid-row

Inilah kesederhanaannya. Katakan anda ingin melaksanakan susun atur berikut untuk skrin kecil, sederhana dan besar.

Inilah markup yang akan kita gunakan:

<nav><ul>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul></nav><div></div>

Jika kita menggunakan beberapa gaya asas, kita akan mendapat hasil berikut, yang cukup untuk skrin kecil:

Sekarang kita dapat mendapatkan pemahaman yang lebih mendalam tentang sifat grid!

Gunakan display: grid untuk membahagikan halaman ke dalam bekas susun atur bebas

Pertama, kita perlu menentukan bahagian halaman mana yang harus diselaraskan dengan susun atur grid. Susun atur grid tunggal boleh ditakrifkan untuk keseluruhan halaman. Walau bagaimanapun, untuk laman web yang mempunyai struktur yang sangat kompleks (seperti laman berita), mengendalikan grid besar dengan cepat boleh menjadi tidak terkawal. Dalam kes ini, saya cadangkan memecahkannya ke dalam beberapa bekas grid bebas.

Seperti ini:

Di manakah anda melukis sempadan antara grid dan apa yang bukan grid? Berikut adalah peraturan peribadi yang saya ikuti:

Jika susun atur bahagian tertentu halaman tidak sesuai dengan grid bahagian halaman bersebelahan atau sekitarnya, kemudian tetapkan bahagian itu sebagai bekas gridnya sendiri.

Saya telah menarik garis grid di bahagian halaman dengan kelas .container-main seperti yang ditunjukkan dalam imej berikut. Anda mungkin mendapati bahawa bahagian kelas .container-inner dari tag tidak sesuai dengan grid baris.

Ini adalah satu lagi susun atur yang mungkin, jika grid garis yang lebih baik dipilih, sebahagian kecil sesuai di sekitar grid. Tiada bekas grid yang berasingan diperlukan di sini.

Pertama, mari kita menukar .container-main ke bekas grid. Berikut adalah blok bangunan asas grid CSS - menukarkan elemen ke dalam bekas grid menggunakan atribut display :

 .Container-Main {
  paparan: grid;
}

Kita juga perlu melakukan perkara yang sama untuk bekas grid lain:

 .container-inner {
  paparan: grid;
}

.container-nav {
  paparan: grid;
}

Gunakan grid-template-columns untuk menentukan lajur yang diperlukan

Seterusnya, kami akan menentukan bilangan lajur yang diperlukan dalam setiap bekas grid dan lebar lajur tersebut. Garis panduan saya mengenai bilangan lajur: Gunakan pelbagai minimum biasa bilangan lajur maksimum yang diperlukan untuk saiz skrin yang berbeza.

Bagaimana kerja ini? Unsur .container-main mempunyai dua lajur pada skrin bersaiz sederhana. Sekiranya kita melipatgandakan ini dengan bilangan lajur pada skrin besar (tiga lajur), kita akan mendapat sejumlah enam lajur.

Kami juga boleh melakukan perkara yang sama untuk navigasi ( .container-inner element). Terdapat tiga lajur pada skrin saiz sederhana, dan kami membiaknya dengan satu pada skrin besar dan kami mendapat tiga lajur.

Unsur .container-nav tidak mempunyai nombor lajur. Dalam kes ini, sistem grid harus menyesuaikan bilangan lajur secara automatik ke bilangan elemen menu. Adalah biasa untuk menambah atau memadam item dalam navigasi, dan ia akan menjadi lebih baik jika ia bertindak balas dengan sewajarnya, yang mana grid dapat membantu kami melaksanakan kemudian.

Ok, jadi kami menentukan bilangan lajur untuk setiap bekas grid. Mari kita tetapkan mereka menggunakan harta grid-template-columns . Tetapi pertama, terdapat beberapa butiran:

• Atribut grid-template-columns hanya digunakan dalam bekas grid. Dalam erti kata lain, anda tidak akan menemuinya di projek grid di dalam bekas (sekurang -kurangnya betul).
• Harta ini menerima banyak nilai yang berbeza yang menentukan kedua -dua bilangan lajur dan lebar lajur. Apa yang kita berminat di sini ialah unit pecahan (FR). Saya sangat mengesyorkan anda menyemak gambaran Robin kerana ia unik untuk grid dan melakukan kerja yang baik untuk mengira cara meletakkan elemen grid ke dalam bekas grid.

Kita perlu menggunakan enam lajur monospace dalam .container-main . Kita boleh menulis dengan cara ini:

 .Container-Main {
  paparan: grid;
  GRID-Template-Columns: 1FR 1FR 1FR 1FR 1FR 1FR 1FR;
}

Sebagai alternatif, kita boleh menggunakan fungsi repeat() untuk memudahkannya kepada sesuatu yang lebih mudah dibaca:

 .Container-Main {
  paparan: grid;
  Grid-template-lajur: Ulang (6, 1FR);
}

Mari kita gunakan pengetahuan ini untuk menerapkannya ke elemen .container-inner kami juga, dan kami memutuskan ia memerlukan tiga lajur.

 .container-inner {
  paparan: grid;
  Grid-template-lajur: Ulang (3, 1FR);
}

Tambah jarak antara projek grid menggunakan grid-gap

Secara lalai, Grid menggunakan semua ruang dalam bekas grid ke projek grid rumah. Menjaga unsur -unsur yang ditutup bersama mungkin menjadi keperluan reka bentuk, tetapi ia tidak berlaku untuk susun atur khusus yang kami buat. Kami mahukan ruang pernafasan antara perkara!

Untuk ini kita mempunyai atribut grid-gap . Sekali lagi, ini adalah harta yang hanya berfungsi dengan bekas grid, semua yang dilakukan adalah mewujudkan jarak menegak dan mendatar antara projek grid. Ia sebenarnya adalah harta singkatan yang menggabungkan fungsi jarak menegak grid-row-gap dan fungsi jarak mendatar grid-column-gap . Dengan mudah, kita boleh memecahkannya seperti itu, tetapi dalam hal ini kita menggunakan jumlah jarak yang sama di setiap arah, grid-gap singkatan lebih mudah ditulis.

Kami mahu mempunyai jarak 20px antara projek grid dalam .container-main , jarak 10px dalam .container-inner , dan jarak 5px dalam .container-nav . Tiada masalah! Setiap bekas grid memerlukan hanya satu baris kod.

 .Container-Main {
  paparan: grid;
  Grid-template-lajur: Ulang (6, 1FR);
  Grid-Gap: 20px;
}

.container-inner {
  paparan: grid;
  Grid-template-lajur: Ulang (3, 1FR);
  Grid-Gap: 10px;
}

.container-nav {
  paparan: grid;
  Grid-Gap: 5px;
}

Gunakan grid-column dan grid-row untuk menentukan saiz setiap projek grid

Kini sudah tiba masanya untuk menjadikan susun atur ke dalam apa yang kita mahu!

Pertama ialah harta grid-column , yang membolehkan kami melanjutkan projek grid ke lajur N, di mana n adalah bilangan lajur yang akan diselaraskan. Jika anda fikir ini sangat seperti harta rowspan dalam jadual HTML yang membolehkan kami melanjutkan sel merentasi pelbagai baris, anda tidak boleh salah.

Apabila kita menggunakannya pada grid .item dalam elemen .container-main dan pada elemen .item-inner dalam .container-inner , ia kelihatan seperti ini:

 .item {
  Grid-lajur: Span 6;
}

.Item-inner {
  grid-lajur: span 3;
}

Apa yang kita bicarakan di sini ialah setiap item merangkumi enam baris dalam bekas utama kami dan tiga baris dalam bekas dalaman kami - ini adalah jumlah lajur dalam setiap bekas.

Satu perkara yang menarik mengenai grid CSS ialah kita boleh menamakan garis grid. Mereka datang dengan nama -nama tersirat dari kotak, tetapi menamakannya adalah cara yang berkesan untuk membezakan antara garis permulaan dan akhir setiap lajur di trek.

Kita boleh menukar bilangan lajur dan baris yang projek itu harus dijangkau pada titik putus yang berbeza:

 Skrin @media dan (Min-lebar: 600px) {
  .item-jenis-b {
    grid-lajur: span 3;
  }

  .Item-inner {
    grid-lajur: span 1;
  }
}

Skrin @media dan (Min-lebar: 900px) {
  .item {
    grid-lajur: span 2;
    grid-baris: span 2;
  }

  .item-jenis-b {
    grid-baris: span 1;
  }

  .Item-inner {
    grid-lajur: span 3;
  }
}

Gunakan grid-auto-flow untuk mengawal penempatan elemen

Grid CSS meletakkan unsur -unsur satu demi satu dalam baris. Inilah sebabnya hasilnya dalam contoh kami pada masa ini kelihatan seperti ini:

Penempatan lajur demi lajur boleh dicapai dengan menetapkan sifat grid-auto-flow ke column ( row adalah lalai). Susun atur kami akan mendapat manfaat daripada penempatan kolumnar dalam kedua -dua kes. Pertama, ia menjadikan item menu kami akhirnya kelihatan mendatar. Kedua, ia membawa unsur -unsur kelas kontena ke dalam gabungan yang dikehendaki.

Hasil akhir

Kesimpulan: Lebih kurang norma?

Sistem grid membolehkan kita bekerja di bawah moto, "lakukan seberapa banyak spesifikasi yang diperlukan, tetapi seberapa sedikit yang mungkin". Untuk menggambarkan berapa banyak yang anda perlu tahu untuk membina atau bahkan susun atur yang kompleks dengan grid CSS, kami hanya meliputi beberapa spesifikasi yang diperlukan untuk menukar elemen ke bekas grid CSS dan untuk menukar item di dalamnya ke projek grid.

Grid CSS menyokong kes penggunaan tambahan berikut:

• Kami mahu membangunkan spesifikasi yang lebih sedikit untuk lebih bergantung pada kedudukan automatik.
• Kami ingin membangunkan lebih banyak spesifikasi untuk menentukan lebih banyak butiran mengenai susun atur hasilnya.

Sekiranya kes pertama terpakai, ia patut mempertimbangkan pilihan grid lain yang berikut:

• Apabila membuat grid menggunakan grid-template-columns , anda boleh menggunakan kata kunci auto untuk membiarkan sistem grid secara automatik menentukan lebar setiap lajur, atau menyesuaikannya dengan kandungan sedia ada menggunakan tetapan min-content , max-content atau fit-content .
• Anda boleh menggunakan repeat , auto-fill , auto-fit dan minmax untuk membiarkan sistem grid secara automatik menentukan bilangan lajur yang diperlukan. Malah pertanyaan media boleh menjadi berlebihan, dan alat ini membantu meningkatkan fleksibiliti tanpa menambah lebih banyak pertanyaan media.

Berikut adalah beberapa artikel yang saya cadangkan mengenai topik ini: Menjadi Ninja Grid CSS! dan lajur auto-resize dalam grid CSS: auto-fill dengan auto-fit .

Jika kes kedua terpakai, CSS Grid memberikan anda lebih banyak pilihan tetapan:

• Anda secara jelas boleh menentukan lebar lajur menggunakan unit pilihan anda (seperti PX atau %), menggunakan harta grid-template-columns . Di samping itu, harta grid-template-rows boleh digunakan untuk menentukan bilangan dan lebar baris jika terdapat bilangan baris tertentu.
• Anda juga boleh menentukan lajur atau nombor baris tertentu sebagai nilai grid-column dan grid-row (atau menggunakan grid-column-start , grid-column-end , grid-row-start atau grid-row-end coistties).

Kami tidak pernah melibatkan penjajaran grid CSS lagi! Namun, kita boleh berbuat begitu tanpa membincangkan topik ini, yang menunjukkan betapa kuatnya grid CSS.

Atas ialah kandungan terperinci 4 sifat grid CSS (dan satu nilai) untuk kebanyakan keperluan susun atur anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!