Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Buat Tata Letak Kotak Rusak Menggunakan CSS Grid

by
Difficulty:BeginnerLength:MediumLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

 Dalam tutorial ini, kami akan menggunakan CSS Grid untuk membantu kami membuat ''tata letak grid yang rusak'', sesuatu yang selalu sulit dengan metode tata letak CSS yang lebih tradisional.

 Inilah yang sedang kami kerjakan (lihat versi yang lebih besar untuk efek penuh):

 Desain ini didasarkan pada karya Anthony Harmon, yang karyanya sempurna untuk demo kami. Lihatlah tata letak ini yang dia lakukan untuk Rel Akustik:

Cheers Anthony
 Ceria Anthony :)

Reka Bentuk Grafik di Web

Pereka web telah dikondisikan selama bertahun-tahun untuk melihat aliran dokumen dan pesanan sumber; mewujudkan susun atur dengan blok terapung dan membiarkan mereka mengisi halaman seperti membina bata. Dalam dunia reka bentuk responsif pendekatan ini nampaknya agak semula jadi. Walau bagaimanapun, ia jauh dari susun atur cetakan di mana dimensi tetap bermakna bahawa pereka boleh yakin meletakkan teks dan imej tepat di mana mereka mahu, yang membawa kepada lebih banyak percubaan dan susun atur visual yang berani.

Grid CSS, di luar hanya membenarkan kami untuk mengatur perkara-perkara di sepanjang paksi x dan y, boleh membantu kami merapatkan jurang susun atur dan mendapatkan sedikit lebih berani dengan reka bentuk kami!

''Kita harus mula menggambarkan semula reka bentuk grafik yang baik dengan perkara-perkara yang bertindih.'' - Jen Simmons

Masa untuk terjebak dalam.

1. Tentukan Grid

Lajur grid tidak perlu seragam. Mari kita ambil bahagian susun atur di atas dan perhatikan bagaimana grid mungkin kelihatan.

Nota: kami hanya membina satu bahagian dalam tutorial ini. Tidak ada sebab mengapa setiap bahagian halaman tidak dapat dibina dari grid bebas.

Kami akan bermula dengan beberapa markup, sebuah bekas grid:

Seterusnya, pada bekas itu, kami akan mengisytiharkan paparan: grid; kemudian tentukan tiang dan baris.

Lajur dibentangkan seperti yang anda lihat dalam imej di atas. Unit fr adalah pecahan lebar keseluruhan, jadi lajur pertama mengambil tiga daripada mereka, yang kedua lebih luas dan mengambil enam. Secara keseluruhan susun atur kami terdiri daripada 27 unit lebar-hampir tidak berkadar grid klasik!

Baris adalah sedikit berbeza. Anda akan melihat campuran pengukuran piksel tetap dan auto. Di mana auto digunakan, baris akan berkembang dan menyusut bergantung kepada kandungan.

2. Membuat Imej

Mari kita mulakan dengan imej. Untuk markup kami mempunyai beberapa pilihan; sama ada kita menggunakan elemen img, atau kita menggunakan elemen lain dengan latar belakang imej.

Kita boleh menggunakan objek yang sesuai: perlindungan; pada elemen img, tetapi itu rumit-mengapa menjadikan hidup kita lebih sukar ?! Jadi untuk demo ini kita akan pergi dengan yang terakhir, kerana itu memberikan kita fleksibiliti yang lebih besar dari segi bagaimana perkadaran imej berubah dengan susunan cecair.

Terimakasih kepada beberapa 'divs' yang baik:

Dengan beberapa imej latar belakang untuk melindungi mereka:

3. Letakkan Imej

Algoritma penempatan auto Grid akan meletakkannya dengan kemas di grid kami, tapi mari kita dapatkan. Kami akan menggunakan garisan grid untuk menentukan di mana setiap elemen harus bermula dan berakhir.

Imej pertama kami bermula pada baris lajur 1, dan berakhir pada 3. Kita boleh menentukan seperti ini:

atau seperti ini:

Dari segi baris, imej pertama kami perlu bermula pada baris baris 2 dan berakhir pada 5, yang boleh kita nyatakan seperti ini:

Atau ini:

Mari kita buat perkara yang sama untuk dua imej kita yang lain. Inilah yang harus anda selesaikan dengan:


Diakui ia tidak begitu mengagumkan, tetapi itu kerana kebanyakan baris masih belum mempunyai ketinggian. Mereka akan mendapatnya sebaik sahaja kita mula menambahkan lebih banyak kandungan dalam langkah seterusnya.

Untuk lebih lanjut mengenai cara kerja grid-grid dan baris grid, lihatlah tutorial cepat ini:

4. Menambah Kandungan Lebih Banyak

Sekarang mari tambahkan kandungan tekstual; blockquote dalam pembalut, dan panggilan kepada blok tindakan. Anda boleh menambah ini di mana sahaja yang anda suka sebagai unsur kanak-kanak dari bekas .grid1, pesanan sumber sebenarnya tidak penting.

Seterusnya, sebelum kita menyusun apa-apa, kami akan meletakkannya pada grid seperti yang kita lakukan dengan imej:

Melihat lebih baik!


Pada ketika ini, perlu diperhatikan bahawa anda boleh bermain dengan z-index jika anda mahu. Menyusun mengikut arahan sumber secara lalai; apa yang pertama dalam markup akan diletakkan di bahagian bawah, apa yang diisytiharkan kemudian di atas. Tetapi jika kami menggunakan z-indeks: 1; untuk .img1 ia akan disusun di atas .img2.

5. Memeriksa yang Tidak Diinsuranskan

Menghidupkan pemeriksa pelayar anda pada masa kini akan memberikan sedikit bantuan kepada susun atur grid. Dalam pemeriksa Chrome, elemen memilih akan menarik garis dan pengukuran grid, seperti:

chrome grid inspector

Pemeriksa dalam Firefox akan melakukan lebih banyak lagi, membolehkan anda melapisi grid menggunakan kawalan di bawah tab Tata Letak. Anda boleh memaparkan nombor garisan, nama kawasan, dan menavigasi kawasan grid pada versi kecil yang kecil:

Firefox grid inspector

Petua: semasa melihat di bawah tab Peraturan, tekan ikon grid di sebelah paparan untuk menogol tindanan:

Dengan memeriksa grid, anda dengan cepat akan menyedari jika anda telah salah letak item grid, melangkau baris di sini atau di sana, atau menamakan sesuatu dengan tidak tepat.

6. Gaya Kandungan

Beberapa deklarasi fon cepat dan gaya butang akan kelihatan lebih baik, tanpa terlalu banyak usaha. Kami akan mula dengan menghubungkan beberapa fon Google di<head>  dokumen:

Kami menggunakan Open Sans untuk badan, Playfair Display untuk blockquote dan tajuk. Mari kita pakai mereka:

Kini beberapa gaya butang:

Akhir sekali, kami akan menyelaraskan blockquote ke pusat, kemudian tambah beberapa padding ke panggilan untuk bertindak, membantu mengisi baris yang diletakkan di dalam. Berikut adalah apa yang anda harus ada sekarang:


Ingatlah bahawa kami sedang membina susun atur kami untuk viewport yang luas. Apa yang anda lihat tertanam dalam tutorial mungkin tidak kelihatan optimum.

7. Tambah Flourishes Visual

Reka bentuk yang kita sedang berusaha ke arah mempunyai beberapa sentuhan visual yang belum kita gunakan. Kita boleh menambahnya dengan pelbagai cara, tetapi kerana mereka tidak berpuas hati dengan itu kita akan menambahkan mereka menggunakan unsur-unsur palsu CSS. Pertama, mencolok di atas blockquote:

Gaya ini menggunakan :: sebelum elemen pseudo di .strapline div, meletakkannya di atas bekas itu sendiri menggunakan kedudukan atas negatif. Ia sangat berpusat, dan anda akan ingat bahawa kami membenarkan ruang yang cukup untuk itu dengan menentukan baris pertama kami sebagai 100px tinggi.

Kami akan melakukan sesuatu yang serupa untuk lencana SVG di tajuk:

Sekali lagi, kami menggunakan unsur pseudo kerana ia hanya visual yang berkembang berbanding dengan kandungan yang berharga. Itu bukan untuk mengatakan anda tidak boleh menambahkannya sebagai <img> ke markup, contohnya. Anda kemudian boleh menggunakan CSS Grid atau Flexbox untuk menyusun kandungan dalam panggilan untuk tindakan-anda mempunyai banyak pilihan di hujung jari anda!


Kami sekarang telah membina susun atur grid yang sangat padat! Masa untuk beberapa langkah seterusnya untuk mengambilnya lebih jauh.

8. Langkah Seterusnya: Sokongan Penyemak Imbas

CSS Grid disokong dengan baik pada masa kini, walaupun IE11 masih memerlukan versi awalan, jadi anda mungkin mahu membungkus gaya grid anda dalam @supports perisytiharan. Itu akan kelihatan seperti ini:

Mana-mana pelayar yang tidak menyokong CSS Grid akan mengabaikan apa sahaja yang anda telah letakkan dalam perisytiharan ini, memberikan anda pilihan untuk memberikan sandaran.

Lihat Grid ''fallbacks'' dan menimpakan idea-idea bagaimana cara menangkis gaya jika anda mahu.

9. Langkah Seterusnya: Pergi Responsif

Susun atur kami kelihatan tajam pada skrin yang lebih besar, tetapi apabila diperah ke dalam viewports yang lebih kecil (seperti apabila tertanam dalam tutorial ini) beberapa retak muncul. Bagaimanakah anda mengendalikan ini dengan cara yang responsif? Menambahkan pertanyaan media akan membolehkan anda menubuhkan gaya pertama, kemudian secara perlahan membina untuk meletakkan dan menjadikan grid lebih rumit apabila viewports semakin luas:

Anda juga boleh memilih untuk menyembunyikan mereka yang telah berkembang pada peranti yang lebih kecil, menyimpannya sehingga terdapat lebih banyak hartanah skrin untuk dimainkan. Pilihan adalah milik anda!

Berikut adalah contoh bagaimana anda boleh membuat reka bentuk ini responsif.

Kesimpulannya

Tutorial ini telah memberikan anda gambaran ke dalam dunia susun atur alternatif yang boleh dicapai dengan CSS Grid. Lupakan susun atur yang anda telah berlatih dengan terapung dan kedudukan; memecahkan tabiat lama! Mula meneroka susun atur yang lebih rumit dan mari kita lihat jika kita boleh membuat web sedikit lebih menarik.

Lebih CSS Grid

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.