susun atur grid CSS: Membina susun atur laman web yang kuat dan fleksibel

mata teras

• susun atur grid CSS menyediakan cara yang lebih kuat dan fleksibel untuk membuat susun atur laman web yang kompleks tanpa menggunakan sifat -sifat seperti inline dan float atau menggunakan stylesheet sistem grid yang berasingan.
• Pada masa ini, hanya 10 dan sokongan kelebihan susun atur grid CSS, tetapi ia boleh diaktifkan melalui bendera tertentu dalam Chrome dan Firefox atau menggunakan polyfill.
• susun atur grid CSS menggunakan unit pengukuran, garisan, trek, sel, dan kawasan yang dipanggil "FR" untuk menentukan susun atur unsur -unsur di laman web.
• susun atur grid CSS membolehkan pemisahan penanda dan susun atur lengkap, menjadikan CSS lebih mudah untuk mengekalkan dan menawarkan kemungkinan yang tidak berkesudahan untuk reka bentuk.

grid adalah penting apabila membuat laman web yang kompleks. Kepentingan grid dalam reka bentuk web moden dapat dilihat dari bilangan kerangka yang melaksanakan sistem grid untuk mempercepatkan pembangunan.

Dengan pengenalan spesifikasi susun atur grid CSS, anda tidak lagi perlu memasukkan lembaran gaya berasingan untuk menggunakan sistem grid. Satu lagi kelebihan ialah anda tidak lagi perlu bergantung kepada atribut seperti inline dan float untuk mengatur unsur -unsur di laman web. Dalam tutorial ini, kami akan merangkumi asas -asas sistem grid dan membuat susun atur blog asas.

Sokongan penyemak imbas

Pada masa ini, hanya 10 dan susun atur grid sokongan Edge - anda tidak boleh menggunakannya di tapak komersial lagi.

Ia boleh diaktifkan dalam Chrome melalui "Ciri -ciri Platform Web Eksperimen" Bendera dalam Chrome: // Flags. Anda boleh mengaktifkannya di Firefox menggunakan bendera layout.css.grid.enabled.

Pilihan lain ialah menggunakan polyfill. CSS Grid Polyfill wujud! Dengan pelbagai pilihan yang disebutkan di atas, anda boleh mula bereksperimen dengan susun atur grid dan belajar seberapa banyak yang anda boleh ketika masih di peringkat awal.

NOTA: Internet Explorer kini melaksanakan spesifikasi untuk versi lama. Malangnya, ini bermakna ia tidak serasi sepenuhnya dengan spesifikasi terkini. Apabila mengkaji contoh -contoh dalam tutorial ini, disarankan agar anda menggunakan Chrome atau Firefox dengan bendera yang sepadan.

terminologi sistem grid

Dari segi elemen meletakkan, sistem grid CSS adalah serupa dengan jadual. Walau bagaimanapun, ia lebih kuat dan fleksibel. Dalam bahagian ini, saya akan membincangkan beberapa istilah yang perlu diperhatikan semasa menggunakan grid:

Unit

fr: Unit ini digunakan untuk menentukan sebahagian ruang yang ada. Ia direka untuk digunakan dengan grid-rows dan grid-columns. Menurut spesifikasi-

memperuntukkan ruang pecahan berlaku selepas semua "panjang" atau saiz baris dan lajur berasaskan kandungan mencapai maksimumnya.

garis: garis menentukan sempadan unsur -unsur lain. Mereka berjalan secara menegak dan mendatar. Dalam gambar di bawah, terdapat empat garis menegak dan empat garisan mendatar.

Jalan: Trek adalah ruang antara garis selari. Dalam gambar di bawah, terdapat tiga trek menegak dan tiga trek mendatar.

Sel: Sel adalah blok bangunan asas grid. Dalam gambar di bawah, terdapat sembilan sel secara keseluruhan.

Kawasan: Kawasan ini adalah bentuk segi empat tepat dengan bilangan sel. Oleh itu, trek adalah kawasan , dan sel juga kawasan .

elemen kedudukan dalam grid

mari kita mulakan dengan asas -asas. Dalam bahagian ini, saya akan mengajar anda cara menggunakan grid untuk mencari unsur -unsur ke lokasi tertentu. Untuk menggunakan susun atur grid CSS, anda memerlukan elemen induk dan satu atau lebih kanak -kanak. Untuk demonstrasi, kami akan menggunakan tag berikut sebagai sistem grid kami:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Setelah melengkapkan tag, anda perlu memohon

atau display: grid pada elemen induk, seperti yang ditunjukkan di bawah: display: inline-grid

Ciri -ciri

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

dan grid-template-columns digunakan untuk menentukan lebar pelbagai baris dan lajur. Dalam contoh di atas, saya menentukan lima lajur. Lajur grid-template-rows bertindak sebagai slot untuk menyediakan jarak yang diperlukan antara unsur -unsur. Lajur pertama mempunyai lebar 200px. Lajur ketiga menduduki bahagian 0.3 ruang yang tinggal. Begitu juga, lajur kelima menduduki bahagian 0.7 ruang yang tinggal. 10px

Gunakan

untuk baris pertama dalam grid-template-rows untuk membolehkan garis berkembang berdasarkan kandungan dalamannya. auto baris bertindak sebagai slot. 20px

Pada ketika ini, unsur -unsur diatur dengan teliti, seperti yang ditunjukkan dalam demonstrasi berikut. (Pautan Demo Codepen ditinggalkan di sini)

Perhatikan bahawa elemen B terletak di lajur kedua yang kami merancang untuk digunakan sebagai slot. Jika anda tidak menentukan lokasi elemen kanak -kanak dalam grid, penyemak imbas meletakkan satu elemen di setiap sel sehingga baris pertama diisi sepenuhnya dan selebihnya kemudian pergi ke baris seterusnya. Inilah sebabnya kami mempunyai empat lajur ganti yang tersisa di barisan kedua.

Untuk memindahkan elemen ke sel tertentu dalam grid, anda perlu menentukan lokasi mereka di CSS. Sebelum menjelaskan cara memindahkan elemen menggunakan sistem grid, lihat imej di bawah. (Pautan imej ditinggalkan di sini)

Dalam kes ini, kami akan menggunakan "penempatan berasaskan baris". Penempatan berasaskan garis bermakna garis dalam sistem grid kami akan berfungsi sebagai panduan kepada penempatan dan elemen yang mengehadkan. Mari kita ambil elemen B sebagai contoh. Dalam arah mendatar, ia bermula dari lajur 3 dan berakhir dari lajur 4. Pada paksi menegak, ia terletak di antara garis 1 dan baris 2.

Kami menggunakan

untuk menentukan garis menegak permulaan elemen. Dalam kes ini, ia akan ditetapkan kepada 3. grid-column-start menunjukkan garis menegak akhir elemen. Dalam kes ini, harta ini akan sama dengan 4. Nilai baris yang sepadan akan ditetapkan sama. grid-column-end

Memandangkan semua perkara di atas, untuk memindahkan elemen B ke sel kedua, anda akan menggunakan CSS berikut:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Begitu juga, untuk memindahkan elemen F ke sel keenam, anda akan menggunakan CSS berikut:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

Selepas membuat perubahan ini kepada CSS, unsur -unsur harus dijangka dengan betul seperti dalam demo ini. (Pautan Demo Codepen ditinggalkan di sini)

Buat susun atur asas

Sudah tiba masanya untuk membuat susun atur blog asas. Blog ini akan mempunyai header, footer, bar sisi dan dua bahagian untuk kandungan sebenar. Mari mulakan dengan penanda:

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

Ingat bahawa urutan elemen dalam tag tidak menjejaskan kedudukan elemen di laman web. Selagi anda tidak mengubah CSS, anda boleh meletakkan footer di atas tajuk dalam tag, dan kedudukan unsur -unsur di laman web tidak berubah. Sudah tentu, saya tidak mengesyorkan ini. Intinya - penanda anda tidak lagi menentukan lokasi elemen.

Apa yang perlu kita lakukan sekarang ialah menentukan nilai -nilai grid-row-end dan sifat -sifat lain dari pelbagai elemen. Sama seperti dalam contoh terakhir, kami akan menggunakan graf grid untuk menentukan nilai semua sifat grid. (Pautan imej ditinggalkan di sini)

Seperti yang ditunjukkan dalam angka di atas, tajuk pergi dari lajur 1 hingga lajur 4, dan dari baris 1 hingga baris 2. Ini sepatutnya kelihatan seperti ini:

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

Begitu juga, "tambahan" pergi dari lajur 3 hingga lajur 4, dan dari baris 5 hingga baris 6. Jadi CSS akan menjadi:

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

Ciri -ciri grid semua elemen lain kini boleh ditentukan dengan mudah. Semak demonstrasi dan percubaan codepen dengan pelbagai nilai grid untuk lebih memahami penempatan berasaskan garis. (Pautan Demo Codepen ditinggalkan di sini)

Kesimpulan

Spesifikasi susun atur grid CSS membolehkan kami dengan mudah membuat susun atur kompleks. CSS yang perlu kita tulis adalah lebih mudah dan mudah dikekalkan. Apabila membuat susun atur kompleks dalam reka bentuk, kita tidak lagi perlu menggunakan float atau sifat -sifat lain seperti itu. Satu lagi kelebihan besar ialah pemisahan lengkap penandaan dan susun atur. Dengan susun atur grid CSS, kemungkinan tidak berkesudahan.

Jika anda mempunyai sebarang soalan mengenai tutorial ini, sila beritahu saya dalam komen.

FAQs Mengenai susun atur grid CSS

Bagaimana susun atur grid CSS berbeza dari kaedah susun atur CSS yang lain?

susun atur grid CSS adalah sistem susun atur dua dimensi yang berbeza daripada kaedah susun atur CSS lain seperti Flexbox, yang merupakan satu dimensi. Ini bermakna dengan grid CSS, anda boleh mengawal susun atur mendatar dan menegak, yang mana kaedah lain tidak dapat dilakukan. Ia direka untuk mengendalikan reka bentuk yang lebih kompleks dan susun atur yang besar. Ia juga lebih fleksibel dan berkuasa, membolehkan reka bentuk yang lebih kreatif dan lebih halus.

Bagaimana untuk memulakan dengan susun atur grid CSS?

3 Ini menjadikan elemen sebagai bekas grid dan elemen anaknya menjadi item grid. Anda kemudian boleh menggunakan pelbagai sifat mesh untuk menentukan susun atur mesh dan lokasi item mesh.

Bolehkah saya menggunakan susun atur grid CSS dengan kaedah susun atur CSS yang lain?

Ya, susun atur grid CSS boleh digunakan bersamaan dengan kaedah susun atur CSS yang lain. Sebagai contoh, anda boleh menggunakan Flexbox untuk komponen laman web dan grid CSS anda untuk susun atur keseluruhan. Ini membolehkan anda memanfaatkan setiap pendekatan susun atur.

Bagaimana untuk membuat grid menggunakan susun atur grid CSS?

Untuk membuat grid menggunakan susun atur grid CSS, anda perlu menentukan bekas grid dengan menetapkan atribut display unsur ke grid atau inline-grid. Anda kemudian boleh menggunakan sifat grid-template-columns dan grid-template-rows untuk menentukan bilangan dan saiz lajur dan baris dalam grid.

bagaimana meletakkan item pada grid?

anda boleh menggunakan sifat grid-column dan grid-row untuk meletakkan item pada grid. Ciri -ciri ini membolehkan anda menentukan garis permulaan dan akhir projek, dengan berkesan meletakkannya dalam sel tertentu atau sel grid.

Apakah garis grid dan trek grid?

Dalam susun atur grid CSS, garis grid adalah pembahagi yang membentuk struktur grid. Nombor mereka bermula pada 1, dan nombor garis meningkat dari atas ke bawah dan dari kiri ke kanan. Trek grid adalah ruang antara dua garisan grid bersebelahan, yang boleh menjadi lajur atau baris.

Apakah unit fr dalam susun atur grid CSS?

unit fr dalam susun atur grid CSS mewakili "skor". Ia mewakili sebahagian ruang yang ada di dalam bekas grid. Sebagai contoh, jika anda mempunyai grid dengan tiga lajur dan tetapkan lebar satu lajur ke 1fr dan dua lajur yang lain ke 2fr, lajur pertama akan menduduki satu pertiga dari ruang yang ada, dan yang lain Lajur masing-masing akan menduduki satu pertiga.

bagaimana membuat grid responsif?

Untuk membuat grid responsif, anda boleh menggunakan pertanyaan media dengan sifat grid-template-columns dan grid-template-rows. Anda juga boleh menggunakan kata kunci auto-fill dan auto-fit dengan fungsi repeat untuk menyesuaikan secara automatik bilangan dan saiz lajur dan baris mengikut saiz viewport.

bolehkah saya sarang grid saya di grid saya?

Ya, anda boleh bersarang grid dalam susun atur grid CSS. Ini bermakna anda boleh membuat projek grid itu sendiri sebagai bekas grid, mewujudkan susun atur bersarang kompleks.

Adakah susun atur grid CSS disokong oleh semua pelayar?

Semua pelayar moden (termasuk Chrome, Firefox, Safari, dan Edge) menyokong susun atur grid CSS. Walau bagaimanapun, Internet Explorer tidak menyokongnya. Oleh itu, adalah penting untuk memberikan susun atur alternatif untuk pengguna yang menggunakan penyemak imbas yang tidak disokong.

Sila ambil perhatian bahawa kerana saya tidak dapat mengakses laman web dan gambar luaran, saya tidak dapat memaparkan gambar secara langsung. Sila pastikan pautan imej ditambah dengan betul ke output akhir anda.

Atas ialah kandungan terperinci Memperkenalkan susun atur grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!